HTML – Basic Tags & Attributes
HTML Document Three Main Parts Document Type Definition (DTD) Header <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> This is not always used in a simple page Header Information such as title, keywords, description, etc. Body Content displayed on Browser
Tags The first tags in your HTML document is <html> This tag tells your browser to interpret everything as html until the </html> tag When starting an html document, type your first tags to get the housekeeping out of the way before getting into the content of the page <html> <head> <title>Your Name Homepage</title> </head> <body> </body> </html> Save your document as soon as you get these first tags started and save frequently while you are working on your document I have created a template that you can use to start your html documents
FAQ After I have edited an HTML file, I cannot view the result in my browser. Why? Make sure that you have saved the file with a proper name and extension like "c:\mypage.html". Notepad automatically saves all files as text files with the extension: .txt Browsers cannot read this extension You must change it to an .html extension when you save your document Make sure that the tags in your document are enclosed with brackets and spelled correctly Check to see that you have the ending tag in your document </body>, </html>, etc.
FAQ I have edited an HTML file, but the changes don't show in the browser. Why? A browser caches pages so it doesn't have to read the same page twice. When you have modified a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to reload the page.
Basic Tags - Headings All text appears plain unless tags tell it to be different Headings give “headline” effect <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> Open the html template in Notepad and key in the preceding, save it as “headings.html” then view in your browser
Comments in HTML The comment tag is used to insert a comment in the HTML source code. <!-- This is a comment --> A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. Open “heading.html and add the following comment <!-- It’s good to know HTML --> What happens if you remove the exclamation?
More about Whitespace Paragraph & Break Tags <p>, <br> Open html template in Notepad and key the following (you put what you like in list) <h1>Things That I Like</h1> Pizza Movies Friends Mountain Biking Save as “like.html” & view in your browser Add <br> after each item in your list then save and refresh your browser Remove the <br> and add <p> </p> to each line (<p>before the line, </p>after) then save and refresh your browser
Horizontal Rule The <hr> tag inserts a horizontal rule Open “like.html” and add an <hr> code after the heading code and between each set of paragraph codes <h1>Things That I Like</h1> <hr> <p>Pizza</p> <p>Movies</p> <p>Friends</p> <p>Mountain Biking</p>
Tag Attributes Tags can have attributes. Provide additional information to an HTML element This tag defines an HTML heading: <h1> Change the alignment attribute to tell the browser that the heading should be centered or right-aligned: <h1 align="center"> This tag defines font: <font> Add attributes for size, color, etc. <font size=“7” color=“purple”> Size (-7 to +7) Come in name/value pairs like this: name="value" Specified in the start tag of an HTML element Attribute values should always be enclosed in quotation marks
Heading Attribute Change Heading attribute as shown: <h1 align="center">Things That I Like</h1> <hr> <p>Pizza</p> <p>Movies</p> <p>Friends</p> <p>Mountain Biking</p>
Font Attributes Change font attributes as shown: <font color="green"><h1 align="center">Things That I Like</h1></font> <hr> <font color="purple" size="5"><p>Pizza</p> <p>Movies</p> <p>Friends</p> <p>Mountain Biking</p> <hr></font> Change the font size to -7, -5, -2, 2, 7 respectively. Save and refresh the browser after each change
Body Attributes Body tag Add attributes to the <hr> tags Defines body of text Holds attributes which tell browser how to display elements such as background bgcolor=“yellow” (add this to the body tag of your file “like.html”) <body bgcolor="yellow"> <body text=“orange”> You can choose different hues of color Open “02 Web-safe color chart” from Reference material folder on the Student Server These are hexadecimal values for different colors Pick a color and insert the hexadecimal code (such as CC6600) in place of “orange” Add attributes to the <hr> tags <hr color="red"> <hr size="10"> <hr width=“50"> <hr width=“50%"> <hr width=“50%“ align=left>