University of Maryland, College Park

A Lesson in Basic HTML Through Example

8/6/2012

Table of Contents
1. Before You Begin (Basics of the Basics) .................................................................................................... 2 1.1 What can I expect from this instruction manual?............................................................................... 2 1.2 What is HTML? .................................................................................................................................... 2 1.3 How is HTML written? (The Tag)......................................................................................................... 2 1.4 IMPORTANT: Use of Spacing in HTML codes ...................................................................................... 3 2. Follow-Along HTML Example .................................................................................................................... 5 2.1 What You Will Make ........................................................................................................................... 5 2.2 Make a Table and Start the Column in the First Row ......................................................................... 6 2.3 Add Text Elements to the Column in the First Row ............................................................................ 7 2.4 Start a New Row and Make a Column Containing an Image .............................................................. 8 2.5 Add Another Column and Create a List of Website Links ................................................................... 9

1. Before You Begin (Basics of the Basics)

1.1 What can I expect from this instruction manual?
If you are reading an instruction manual to learn HTML, you have probably used a computer before. Therefore, the following assumptions will be made about you: 1. You have basic computer skills. 2. You have access to a web browser (Internet Explorer, Mozilla Firefox, etc.). 3. You have access to an HTML editorsoftware or online-basedor a word processor and a way to view the HTML displayed as a web page. This instruction manual discusses the essential basics of writing HTML codes to create web pages. It is not a guide to other markup languages like Cascading Style Sheets (CSS) or JavaScript. With this manual, you will learn how to 1. 2. 3. 4. 5. make tables with multiple columns and rows, write and customize text, add images, make unordered lists, and create hyperlinks to other web pages.

1.2 What is HTML?

HTML stands for HyperText Markup Language. It is the language used to describe the content and structure of a web page. HTML is written to a text file in series of short codes, which have a specific syntax, similar to programming languages like C, C++, or Java. The text file is saved as an HTML file that is read by a web browser, which displays the file in a visible form.

1.3 How is HTML written? (The Tag)

HTML code is written in tags. Tags separate HTML code from normal text and allow the implementation of enhanced text (italics, colors, etc.) and various visual elements, such as tables and images. Tags are denoted by keywords/characters (tag names) within angular brackets (< >). Pairs of opening and closing tags are needed to begin and end a function, respectively. Opening tags come first in a tag pair. Closing tags come second with a forward slash in front of the tag name. Some tags will not need a closing tag (ex. see break tag on page 4). For example, consider the text in the following box to be HTML code:
<b>Text here will appear bold.</b> This text will not because it is outside of the tags.

On a web browser, the text in the box above will appear something like this:

The text here will appear bold. This text will not because it is outside of the tags.

Notice how any text within the angular brackets disappears and the text wrapped around by the <b> and </b> tags are bolded. This is a very simple example.

1.4 IMPORTANT: Use of Spacing in HTML codes

HTML documents do not register multiple horizontal spaces between characters or vertical spaces between paragraphs without special tags. Figure 1.1 demonstrates: HTML code
This is an example to show how HTML documents do not horizontal and vertical spaces. Spaces are added to HTML documents merely to make the code easier to read. Even though these sentences have outrageous spacing within and between, it will not show up that way on the web page. See? If you want to make spaces in your text, you need to use tags. register multiple

Displayed as

This is an example to show how HTML documents do not register multiple horizontal and vertical spaces. Spaces are added to HTML documents merely to make the code easier to read. Even though these sentences have outrageous spacing within and between, it will not show up that way on the web page. See? If you want to make spaces in your text, you need to use tags.
Figure 1.1 The incorrect way to create spaces and paragraphs in text. Figure 1.2 on the next page shows how the paragraph tag (<p>,</p>) and break tag (<br>) can be used to create the desired text spacing:

HTML code
<p>This is an example to show how to use the paragraph tags to avoid mistakes like in Figure 1.1.</p> <p>In the code, no spaces are needed, but the paragraph tag registers that you want to separate the text vertically.</p> <p>This and the previous paragraphs are aligned to the left by default.</p> <p align=center>This paragraph is centered.</p> <p align=right>This paragraph is aligned to the right.</p> This text <br> is separated <br> with break tags, which returns text <br> 1 line.

Displayed as

This is an example to show how to use the paragraph tags to avoid mistakes like in Figure 1.1. In the code, no spaces are needed, but the paragraph tag registers that you want to separate the text vertically. This and the previous paragraphs are aligned to the left by default. This paragraph is centered. This paragraph is aligned to the right. This text is separated with break tags, which returns text 1 line.
Figure 1.2 How to use paragraph and break tags to position text. As you follow along with the example, keep these points about tags and spacing in mind. The code is written in a deliberate way to make it easy to follow, but the positioning of the code does not have to be strictly followed. Have fun!

2. Follow-Along HTML Example

2.1 What You Will Make
Figure 2.1 shows what you will produce with the follow-along HTML example code:

My Website
I'm having fun learning how to use HTML!

My 5 Favorite Websites Are: 1. 2. 3. 4. 5. Website 1 Website 2 Website 3 Website 4 Website 5

Figure 2.1 The final product of the example code. This web page layout consists of a main table (defined by the thick outer blue border) with two rows. The first row has one column with heading text, a horizontal dividing line, and standard text. The second row has two columns. The first column in the second row incorporates an image. The second column in the second row incorporates an unorganized list with hyperlinks to other web pages as the list items.

NOTE: Results may appear slightly different depending on which web browser you use, but they are effectively the same.

2.2 Make a Table and Start the Column in the First Row
Type the code as it appears in Figure 2.2 into your HTML editor. HTML Code
<center> <table border=6 bordercolor=blue cellspacing=0 cellpadding=5 width=600> <tr> <td colspan=2>

Figure 2.2 Making a table and starting the first row.

What is being used here?

Code Element
<center>

Type Center tag Begin table tag Table tag attribute Table tag attribute Table tag attribute Table tag attribute

Description Aligns all following content to the center of the page, table, or table cell. Adding </center> would terminate the center alignment and all following content would be left-aligned. Initiates a table. Defines a border for a table where n is any integer number from 1 to 1000. Increasing the number increases the border thickness. Specifies a color for the table border. COLOR is replaced by any common color name or 6-digit hexadecimal color code 1. Specifies the spacing between the cells that make up a table where n is any integer number from 1 to 1000. Increasing the number increases the cell spacing. Specifies the distance between table cell contents and cell borders (the padding) where n is any integer number from 1 to 1000. Increasing the number increases the cell padding. Specifies the overall width (in pixels) of a code element where n is any integer number from starting from 1. In this example, width=600 is used to specify the table width. Note: making n too large will crash the webpage. The height can also be defined by typing height=n within a tag. Initiates a row in within a table. Initiates a column in a table. Note: the column is initiated after the row tagthis is to make columns within the row. Specifies the number of columns n over which a column in one row will span in the next row. In this example, since n=2, the column defined in the current row will span over 2 columns in the next row.

<table>

border=n

bordercolor=COLOR

cellspacing=n

cellpadding=n

width=n

General tag attribute Begin row tag Begin column tag Column tag attribute

<tr> <td>

colspan=n

perform an online search of hex color codes for more information. 6

2.3 Add Text Elements to the Column in the First Row

Type the new code as it appears in Figure 2.3 below the previous lines of code into your HTML editor. HTML Code
<center> <table border=6 bordercolor=blue cellspacing=0 cellpadding=5 width=600> <tr> <td colspan=2> <center> <h1>My Website</h1> <hr color=green size=3> <font face=calibri size=3> <p>I'm having fun learning how to use HTML!</p> </td> </tr>

Figure 2.3 Adding contents to the column in the first row.

What is being used here?

Code Element
<hn>YOUR TEXT</hn>

Type Begin/end heading tags Horizontal line tag General tag attribute General tag attribute Font tag Font tag attribute Begin/end paragraph tags End column tag End row tag

Description Makes YOUR TEXT a heading where n is an integer number from 1 to 6. n =1 is the main heading, and n =2,3,4,5,6 are subsequent subheadings. Creates a horizontal line that spans the width of the area in which it is contained. In this example, it spans the column width. Specifies a color for the code element. COLOR is replaced by any common color name or 6-digit hexadecimal color code. Specifies the size of a code element where n is an integer. For <hr>, n can be any integer starting from 1. For <font>, n can be any integer from 1 to 7. Defines the look of the visible text (the font) following the font tag. Adding </font> would terminate the font definition. Defines the font style (the face). FONTNAME is replaced by the name of any standard font style, like Arial, Georgia, Comic Sans MS, script, verdana, etc. Defines YOUR TEXT as a paragraph and automatically creates vertical spaces to separate it from surrounding text. Terminates/completes a column. Terminates/completes a row.

<hr>

color=COLOR

size=n

<font>TEXT

face=FONTNAME

<p>YOUR TEXT</p> </td> </tr>

2.4 Start a New Row and Make a Column Containing an Image

Type the new code as it appears in Figure 2.4 below the previous lines of code into your HTML editor. HTML Code
<center> <table border=6 bordercolor=blue cellspacing=0 cellpadding=5 width=600> <tr> <td colspan=2> <center> <h1>My Website</h1> <hr color=green size=3> <font face=calibri size=3> <p>I'm having fun learning how to use HTML!</p> </td> </tr> <tr> <td width=300> <center> <img src="IMG URL" width=200> </td>

Figure 2.4 Creating a new row with a column containing an image.

What is being used here?

Code Element
<img>

Type Image tag Required image attribute General tag attribute

Description Defines an image that is located on the internet. Image tags do not require closing tag. Specifies the URL (the web address/location) of an image. IMG URL is replaced by the image URL. As noted before, width specifies the overall width (in pixels) of a code element where n is any integer number from starting from 1. NOTE: For an image, specifying the width automatically specifies the correct height proportional to the images original dimensions.

src="IMG URL"

width=n

Go find an image!
Find an image online (it does not matter where from) then copy and paste its URL/web address in place of IMG URL inside the <img> tag.

2.5 Add Another Column and Create a List of Website Links

Type the new code as it appears in Figure 2.5 below the previous lines of code into your HTML editor. HTML Code
<center> <table border=6 bordercolor=blue cellspacing=0 cellpadding=5 width=600> <tr> <td colspan=2> <center> <h1>My Website</h1> <hr color=green size=3> <font face=calibri size=3> <p>I'm having fun learning how to use HTML!</p> </td> </tr> <tr> <td width=300> <center> <img src="IMG URL" width=200> </td> <td width=300> <font face=calibri size=3> <b>My 5 Favorite Websites Are:</b> <ul> <li> <a href="URL">YOUR TEXT</a> <li> <a href="URL">YOUR TEXT</a> <li> <a href="URL">YOUR TEXT</a> <li> <a href="URL">YOUR TEXT</a> <li> <a href="URL">YOUR TEXT</a> </ul> </td> </tr> </table>

Figure 2.5 Adding another column with a list of website links.

What is being used here?

Code Element
<b>YOUR TEXT</b>

Type Begin/end bold text tags Begin/end unordered list tags List item tag

Description Renders YOUR TEXT as bold-faced text. Defines an unordered (bulleted) list. Defines an individual point in a list (a list item). Any content following <li> will be preceded by a bullet point. List item tags do not require closing tags. The <a> is called an anchor tag and the href="URL" attribute defines the anchor as a link to another web page. This is called a hyperlink. The URL is replaced by the URL/web address of another web page. YOUR TEXT is the visible text you click on to activate the link. It can be modified like any other plain text. 9

<ul> </ul>

<li>

<a href="URL">YOUR TEXT</a>

Begin/end hyperlink tags

</table>

End table tag

Terminates/completes a table.

List your favorite websites!

Copy and paste the URLs/web addresses of your 5 favorite websites in place of URL inside the <a> tag, then change YOUR TEXT to the titles of those web pages. When you view the HTML file as a web page, click on the text to test the links out. It should redirect your browser to those web pages!

Congratulations! You have finished your lesson in basic HTML! Check to make sure your page matches the example shown in Figure 2.1.

10