Intro to HTML

Printable Version



A Basic HTML Document
<html>
<head>

</head>
<body>

</body>
</html>

This is a basic HTML document. Every HTML document that you create will begin with this structure. The first line contains the <html> tag, which identifies the language used in the document as HTML. This tag must always be used with the </html> tag, which is located at the end of the document. All your HTML code will appear between these two tags.

Every HTML document has two parts, a head and a body. The head contains the title and other information about your documents and is enclosed by the <head> . . . </head> tags. The body includes everything that you want to appear in the HTML page and is enclosed by the <body> . . . </body> tags.

Title

The first thing your HTML page needs is a title. The title will appear on the colored bar at the top of your browser, not on the actual web page. For example, the title of this page (which is shown in the following image) is HTML Lesson One.

To create a title, you will add the following tags to the head portion of your HTML document <title> </title> . Whatever text you type between the opening and closing title tags will appear as the title of your webpage.

<html>
<head>
<title>My First Website</title>
</head>
<body>

</body>
</html>
Click here to see an example


Background Color

Next you will learn how to change the background color of your webpage. In order to do this you will use bgcolor, which is an attribute of the body tag. An attribute is a part of a tag that specifies color, alignment, size, etc. To add the bgcolor attribute to the body tag, you will add the word bgcolor after the word body but before the closing bracket. You will put an equal sign after the word bgcolor and specify the color you wish to use. To do this, put in a pound sign followed by a hexadecimal value. Hexadecimal is a six digit code consisting of the numbers 0-9 and the letters A-F. The first two numbers are red, the second two numbers are green and the last two numbers are blue, where FF represents the most amount of color and 00 represents no color. Here are a few examples:

Look at this example of code to add a background color and then try it on your own webpage:

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#228822" >

</body>
</html>
Click here to see an example

Here are a few links to hexadecimal charts:
Complete HTML True Color Chart
HTML Color Chart
Complete HTML True Color Chart

Text Colors

Now that your website has a title and a background, let's add some text. To change the color of the text in the entire document, you can add the text attribute to the body tag. The text attribute is used the same way as the bgcolor attribute, you will add it inside the body tag and set it equal to a hexadecimal value.

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#28822" text="FFFF00">
HTML is Fun!
</body>
</html>
Click here to see an example

To change the color of a certain piece of text, you can use the font tag. The font tag should be placed within the body of the document (between the <body> and </body> tags). Place the font tag (<font>) before the text whose color you want to change. Use the color attribute to specify the hexadecimal value of the color you want to use. When you have finished typing in the text that you wish to appear in a different color, use the </font> tag to return to the page's default color as it is defined in the body tag (if the color is not defined it will default to black).

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#28822" text="FFFF00">
HTML <font color="#FF0000>is</font> Fun!
</body>
</html>
Click here to see an example

Paragraphs and New Lines

To create an HTML paragraph, you will use the <p> . . . </p> tags. The paragraph tags tell the browser to insert a blank line before any text that follows it.

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#28822" text="FFFF00">
<p>This is an HTML paragraph.</p>
This text follows the HTML paragraph.
</body>
</html>
Click here to see an example

If you want to start typing on a next line on your webpage use the line break tag <br>. Notice that you only need one line break tag (there is no such thing as a </br> tag).

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#28822" text="FFFF00">
Here is some text.<br> This text appears on the next line. </body>
</html>
Click here to see an example

Notice that even though all the text in the HTML document appears on the same line, when you look at the web page in the browser window, the <br> tag has moved This text appears on the next line to the next line.

Text Sizes

You can use the font tag and the size attribute to change the size of your text. The size ranges from 1 to 7 with 1 being the smallest text and 7 being the largest. You can also use the size attribute to change the relative size of the text. Setting size to "+1" will increase the current font size by one, setting it to "-3" will decrease the current font size by 3.

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#28822" text="FFFF00">
HTML <font color="#FF0000>is</font> Fun!
<font size="1">This is font size 1</font>
<font size="7" color="#000099">This is font size 7</font>
</body>
</html>
Click here to see an example

You can also use heading tags to change the size of your text. There are six headline tags, <h1> through <h6> where <h1> is the largest and <h6> is the smallest (<h4> - <h6> are smaller then normal text). You will use the <h1>...</h1> tags to enclose the text. The heading tags create an automatic paragraph break, which means that they insert a blank line after the closing heading tag, just like the paragraph tags.

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#28822" text="FFFF00">
HTML <font color="#FF0000>is</font> Fun!<br>
<h1>This is large, bold text</h1>
<h6>This is small, thin text</h6>
</body>
</html>
Click here to see an example

Formatting Text

To format your text, you can use the bold, underline, and italics tags. To make text bold use <b> </b>, to underline text use <u> </u>, and to make text italicized use <i> </i>. Only the text that appears between the opening and closing tag will be affected.

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#28822" text="FFFF00">
HTML <font color="#FF0000>is</font> Fun!<br>
<b>This text is bold.</b><br>
<u>This text is underlined.</u><br>
<i>This text is italicized.</b><br>
<b><i>This text is bold and italicized.</i></b><br>
</body>
</html>
Click here to see an example

Validation Warning: Nesting Rules
If you nest tags (use more then one at a time, such as using <b> and <i> in the previous example) you must open and close tags in the proper order or your code will not validate. The last tag opened must be the first tag closed. Here are a few examples:

Valid
<b><i> This text is bold and </i></b>
<i>HTML is <u>fun</u>!</i>

Not Valid
<b><i> This text is bold and </b></i>
<u><b>HTML</u> is fun</b>


Centering Text

If you want to center your text, you can use the center tag <center>...</center>. All text that appears between the center tags will be centered on your webpage. Any text following the <center> tag will appear on the next line.

<html>
<head>
<title>My First Website</title>
</head>
<body bgcolor="#28822" text="FFFF00">
<center>HTML <font color="#FF0000>is</font> Fun!</center>
<b>This text is bold.</b><br>
<u>This text is underlined.</u><br>
<i>This text is italicized.</b><br>
<b><i>\This text is bold and italicized.</i></b><br>
</body>
</html>
Click here to see an example

Validation Warning: Center Tags
If you use the center tag in combination with other tags (such as <b> or <font>) the center tag must always be the outermost tag or your document will not validate. Here are a few examples:

Valid
<center><font color = "#440000">CSC 101 Webpage</font></center>
<b>This text is not centered</b><center><b>But this text is centered</b></center>

Not Valid
<b><center> This text is bold and centered </center></b>
<font color = "#880022">This text is not centered <center> but this is </center> and all of the text is red.</font>

The same rules apply to the paragraph tags <p>...</p>.

Review

<html>...</html> Encloses entire document and identifies language as HTML
<head>...</head> Contains information about the HTML document
<body>...</body> Contains the main portion of the HTML document
  • bgcolor - changes the color of the webpage background
  • text - changes the default text color
<font>...</font> Changes the appearance of a piece of text within the webpage
  • color - changes the color of the text
  • size - changes the size of the text (1 - 7)
<p>...</p> Inserts a blank line between each paragraph on your website
<br> Starts a new line
<h1>...</h1> - <h6>...</h6> Changes the size and intensity of the text
<u>...</u> Underlines the text
<i>...</i> Italicizes the text
<b>...</b> Makes the text bold
<center>...</center> Centers the text