How to create a static website with HTML

How to create a static website with HTML
For creating simple, static websites, there is no need of any special software. Although there are several programs like Visual Web Developer, Dream weaver, FrontPage, etc. available for generating HTML codes; I strongly recommend that you start with notepad for writing and editing HTML files. Alternatively, you may use any other text editor of your choice. WEB PAGE MAKER

HTML Basics HTML – Hyper Text Markup Language (Not a programming language, but a mark-up language) for creating web pages. HTML is just a simple text file which is read by web browsers (like Internet Explorer and Google Chrome) and displayed as web page. With HTML, you can create your own website.

Save the text file as ‘myfirstwebpage.html’ or ‘myfirstwebpage.htm’ in html folder. Remember to change the extension as ‘.html’ or ‘.htm’ in place of default ‘.txt’ or your html code will not work! Now go to ‘html’ folder where you have just saved your web page and double click to open it. Wow! You have just created your first web page. Congratulations…!

In the example above, <html>, <head>, <title> and <body> are all HTML tags. HTML tags are code words surrounded by angle brackets. Tags are used by web browsers to mark-up the web pages. There are many types of tags nested in HTML document, each having different meanings. Most of these tags come in pair – starting tag and end tag. End tag is different from starting tag by a forward slash “/”. Web pages are made of a series of elements. Elements consist of start tag, end tag and some content in between. In the example, “<title>My First Web Page</title>” is an element.

As of now, treat <html> tag as the starting and end tag of any HTML document. The html codes between <html> and </html> makes the web page. All other tags come in between these parent tags. <title> tag describes the web page title. The content between these tags appear at the title bar of the page. Putting right and appropriate title for your web page is very important. Search engines like ‘Google’ and ‘Bing’ give a lot of importance to the title of the page in their search results. Make sure to put an appropriate title to all of your web pages.

Notes Starting tags must be accompanied with respective end tags. It is a good idea to write starting tag and end tag first and then add content in between. HTML tags are not case-sensitive. It means browser will equally treat <html> and <HTML>. However, the correct practice is to always use lower-cases for html codes. Well….it was a lot of theory. However, these are the basics and must be understood clearly for building strong foundation. Repeat from top, if you are not comfortable before moving ahead!

HTML Headings Headings are defined with <h1> to <h6> tags, ‘h1’ being the most important and prominent. The size of the text between these tags reduces with ‘h2’, ‘h3’ and so on. By default, headings are displayed in bold text. <h1> This is 'h1' heading</h1> <h2> This is 'h2' heading</h2> <h3> This is 'h3' heading</h3>

HTML Paragraphs Both html headings and html paragraphs are put in between <body> tags. These are used to publish your written contents. HTML paragraph is defined with <p> and </p> tags. <body> <h1> This is heading</h1> <p> Here is the paragraph for this heading. Headings and paragraphs are the basic elements of any html document. </p>

HTML line break - <br /> tag To introduce a line break, use <br /> tag. You may use two or more <br /> tags for more spacing between the lines. <p> Here is the paragraph for this heading.<br /> Headings and paragraphs are the basic elements of any html document. </p>

HTML – Horizontal Lines <hr /> is used to introduce a horizontal line inside the page. Its primary use is to separate two contents. Like <br /> tag, <hr /> also does not come in pair. Use of ‘hr’ tags at appropriate place makes your web page more readable and professional! <p> Here is the paragraph for this heading.<hr /> Headings and paragraphs are the basic elements of any html document. </p>

Viewing HTML Source Code We now know that the websites are made in HTML. So, how do you see the HTML source code of any web page? It’s really simple. Just right click on the web page you are currently viewing and select ‘view source’ or ‘view page source’ or anything similar. If you see the HTML source codes of large web pages, it may seem to be little complicated and confusing. But don’t worry; as you progress you will start understanding it easily.

HTML – Formatting - What are HTML Attributes? Attributes are associated with tags (and elements) and provide extra information to the browsers. These appear in HTML documents like this: <tag attribute=”value”>Some Content</tag>. <h1>This is normal heading</h1> <h1 style="font-size:10px; color:#ff0000"> This is heading with attribute.</h1> <p style="background-color:#ffffcc"> As you see, the background of the paragraph has changed. You can do a lot more with style attribute. </p>

HTML – Text Formatting <b> and </b> bold. <i> and </i> italic. <sub> and </sub> subscripted text. <sup> and </sup> superscripted text. <b>This is bold. </b> <i>This is in italic style. </i> This text contains <sub>subscript </sub> text. This text contains <sup>superscript </sup> text.

HTML Lists This is ordered list: List Item And this is unordered list: Unordered List Item <ol> <li>List Item</li> </ol> <ul> <li>Unordered List Item</li> </ul>

HTML Images We use <img> tag to place image in HTML document. Minimum html code for html image: <img src=“mypic.jpg" /> With attribute : <img src=" " alt=“CIC Logo“ title =“ Cic Logo” height="60" width="60" />

HTML Images Use ‘JPEG’ format for the photographs while displaying html image. Compressing the JPEG image will slightly distort it. ‘GIF’ has the limitation of 256 colors only. However, it maintains the original colors. Use ‘GIFs’ for clip-arts, buttons, etc. ‘PNG’ is best suited for icons, banners and diagrams as it retains the transparency also. It is getting more and more popular as standard html image.

HTML Links So far, we were focused just to make stand alone web pages. It’s time now to link these with each other with html links. You will find html links in all web pages. HTML links have a great role to make internet so successful. Remember ‘hyper-text’ of HTML. HTML links are defined with <a> and </a>tags (anchor tags). <a href=" ">Go to CIC Website</a> <a href="links.html"> Go to HTML Links</a>

NEXT Tables & Forms Design… How to create a Dynamic website ?
Rajneesh Talwar – ````````````````````````````

How to create a static website with HTML

Similar presentations

Presentation on theme: "How to create a static website with HTML"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

How to create a static website with HTML

Similar presentations

Presentation on theme: "How to create a static website with HTML"— Presentation transcript:

Similar presentations

About project

Feedback