Basic HTML
Sample Order of Tags on a Web Page
<!DOCTYPE html> <head> <title>Title You See on Browser's Tab</title> </head> <body> <h2>Heading in The Web Page</h2> <p>One paragraph.</p> <p>This is another paragraph with a <b>bold </b>word.</p> </body> </html>
Break
<br> </br>
Color
<font color = "white"> tester</font> <body bgcolor = color> <body text = color>
Heading
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>
Example Code of Webpage
<html> <head> <title>Lucy's Page</title> </head> <body bgcolor = turquoise> <h1><center>Lucy's Page</center></h1> <p> <center> <img src= "PenguinWaiter.jpg"> </center> <h2><a name="favorites"></a> My Favorites </h2> Food: chocolate<br> Sport: <font color = red>football </font><br> Color: green <br> Movie: Shrek <br> Web sites: <a href = "http://lonestar.edu/"> Lone Star College </a> <h2> News Flash </h2> My sister is getting married in September <h2> Quote of the Day </h2> The best things in life are free, but it costs a lot of time and money before you find this out <p>Go to my <a href = "#favorites"> list </a> <p> <h2> My Schedule</h2> <table border="3" width = 75%> <tr bgcolor="white"><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td></tr> <tr><td> Class at 10 </td><td> Class at 9</td><td> Class at 10</td><td> Class at 9</td></tr> <tr><td bgcolor="blue"> <font color="white">Work</td><td>Study</td><td bgcolor="blue">Work</td><td>Study</td></tr> </table><p> <h2>Hints for making good grades in class</h2> <ol> <li>Read the chapter <li>Work the exercises <li>Work the assignments </ol><p> <h2>Some things I have found helpful for school</h2> <ul> <li>Purchase your books by the first day of class <li>Purchase school supplies as soon as possible <li>Find a good place to study </ul> </body> </html>
Image
<img src="example.jpg" alt="some text"/>
Bold and Italics
<p><b>This is bold.</b></p> <p><i>This is in italics</i></p>
Table
<table> <table border="1" width = 75%> <tr> : new row <td> : new cell <tr bgcolor = "white"><td bgcolor="blue">row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
<body> and </body> tags
Always appear after the head tags but before the closing html tag </html>. What is between these tags appears in the browser as the content of the web page.
<title> and </title> tags
Always appear in the head section, between the <head> and the </head> tags. What is between these tags appears at the top of the browser page, on the browser tabs.
<head> and </head> tags
Always comes right after the <html> tag. Things in this section tell the browser things about the file, such as its title.
<html> and </html> tags
Always the second and last tags in an HTML file. Everything except the Doctype declaration goes between these two tags.
Element
An element is the part of an HTML page which contains a set of tags and the content inside of those tags. This is an example of an element: <h2>The Great Gatsby</h2>.
Hyperlinks
An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red link to a file <a herf="webpage_2.html">Go to webpage 2</a> link to my website <a href="URL"> Text displayed for the link </a> link to another location on same page Anchor tag: <a name = "nameHere"></a> link to anchor: <a href = #nameHere"> text displayed for the link </a>
Bold tags
Bold tags, <b> and </b>, are used the make text bold. Can also be written as <strong> and </strong>.
CSS
CSS (Cascading Style Sheets) Cascading style sheets are used to format the layout of Web pages.
Heading tags
Heading tags are used to create titles (or headings) and sub titles in a document. There are six sizes with the <h1> and </h1> tags making the larges title (or heading) and the <h6> and </h6> tags creating the smallest title.
HTML
HyperText Markup Language, the authoring language used to create documents on the World Wide Web
<!DOCTYPE html>
Is always the first thing in an HTML file and it tells the browser what language (what version of HTML) the file is using.
Nesting
Nesting is what it is called when one set of tags appears inside of another set of tags. Nesting tags works just like nesting parenthesis in math. They must be closed from the inside out, in the correct order.
Paragraph tags
Paragraph tags are written as <p> and </p>. They define the beginning and end of a paragraph.
Tags
Tags are codes used in HTML to tell the browser what to do. Tags are always surrounded by the < and > characters. This is an example of a paragraph tag: <p>.
Create a Web Page
You should be able to create a simple web page correctly incorporating all of the features described above.