HTML

Introduction

HTML is a computer language used to create web pages.  HTML stands for Hypertext Markup Language.  HTML contains only text and it does not contain images, sound or videos, although it has commands that allow you to include these things in a document.  This makes it easy for the document to be read by any computer.  The meaning of Hypertext Markup Language is explained below.

Create a webpage

Follow the directions below to create and view a basic Web page.  We will create the Web page using the basic text editor NotePad and view the Web page using the browser Internet Explorer.  A browser is a program used to view HTML documents.  The browser interprets the HTML tags and displays the documents properly.

 Step 1 Create a folder to contain your Web page and name it MyWebPage.
Step 2 Surf the internet to find a picture that you enjoy.  Right-click on the picture and select Save Picture As.  Use the dialog box to save the picture into the folder you created and name it picture.gif, picture.jpg.  Be sure to use whatever file extension the computer suggests.
Step 3
 		 Open the text editor NotePad using Start/Programs/Accessories.  Type in the text shown in bold below exactly as shown including the angled brackets (<) less than and (>) greater than.  Save the file to the folder MyWebPage and name it first.html.

<html>
<head>
<title> My First Webpage </title>
</head>

<body>
Welcome to my first web page.
I am thrilled to be learning HTML.
</body>
</html>

Note the tags come in pairs.  We have the opening html tag (<html>) and the closing html tag (</html>).  The opening and closing tags are similar, except the closing tag has an additional backslash (/).  In this and every web page we have the html tags (<html>,</html>), tags for the heading (<head>,</head>) and tags for the body (<body>,</body>).  Some information about the title and a few other items are included in the heading and the material that is actually seen on the web page is included between the opening and closing body tags.
Step 4 View the document using Internet Explorer.  Use Start/Programs/Internet Explorer or double-click the Internet Explorer on the desktop to open Internet Explorer.  In Internet Explorer, go to File/Open, click on the Browse button and select the file first.html.  You should see a web page that looks like.

Welcome to my web page.
I am thrilled to be learning HTML.

In the steps that follow, the new HTML code will be highlighted in red.  This is the code that needs to be added at each stage.
Step 5 Add some formatting tags to the body tag.  Bgcolor sets the background color for the page and text sets the color for the text on the page.  Resave the file first.html and view the changes in Internet Explorer by going to View/Refresh. 

<html>
<head>
<title> My First Webpage </title>
</head>

<body  bgcolor="yellow" text = "blue">
Welcome to my first web page.
I am thrilled to be learning HTML.
</body>
</html>
Step 6 Add some text formatting.   The word "first" is reformatted.  Its font is set to Arial and its size is increased.  The word "thrilled" is now in boldface.  Resave the file first.html and view the changes in Internet Explorer by going to View/Refresh.

<html>
<head>
<title> My First Webpage </title>
</head>

<body  bgcolor="yellow" text = "blue">
<h1> Computer Science 100 </h1>
Welcome to my <font size="6" face="Arial"> first </font> web page.
I am <strong> thrilled </strong> to be learning HTML.
</body>
</html>
Step 7 Add a bulleted list.  The <ol> tag refers to ordered list.  If we had used <ul>, the list would be bulleted.  Resave the file first.html and view the changes in Internet Explorer by going to View/Refresh.

<html>
<head>
<title> My First Webpage </title>
</head>

<body  bgcolor="yellow" text = "blue">
<h1> Computer Science 100 </h1>
Welcome to my <font size="6" face="Arial"> first </font> web page.
I am <strong> thrilled </strong> to be learning HTML.
<h2> Bulleted and ordered Lists </h2>
<ol>
<li> Here is my first step. </li>
<li> Here is my second step. </li>
</ol>
</body>
</html>
Step 8 Add a link.  This link is to the Yahoo website.  The <a> tag is called the anchor tag and its href attribute tells the browser where to point.  Resave the file first.html and view the changes in Internet Explorer by going to View/Refresh.

<html>
<head>
<title> My First Webpage </title>
</head>

<body  bgcolor="yellow" text = "blue">
<h1> Computer Science 100 </h1>
Welcome to my <font size="6" face="Arial"> first </font> web page.
I am <strong> thrilled </strong> to be learning HTML.
<h2> Bulleted and ordered Lists </h2>
<ol>
<li> Here is my first step. </li>
<li> Here is my second step. </li>
</ol>
<h2> Creating links </h2>
<a href="http://www.yahoo.com"> Yahoo ! </a>
</body>
</html>
Step 9 Add a picture.  The picture is the picture you downloaded from the internet in step 2.  The picture is included using the image tag <img>.  The scr attribute refers to the source of the picture and sets the name of the image to be included.  Resave the file first.html and view the changes in Internet Explorer by going to View/Refresh.  If your image doe not appear, carefully check the name of the graphics file in your MyWebPage folder.  Make sure that the name you use the exact same name in your HTML code.  For example you may need to use picture.jp or picture.tiff instead.

<html>
<head>
<title> My First Webpage </title>
</head>

<body  bgcolor="yellow" text = "blue">
<h1> Computer Science 100 </h1>
Welcome to my <font size="6" face="Arial"> first </font> web page.
I am <strong> thrilled </strong> to be learning HTML.
<h2> Bulleted and ordered Lists </h2>
<ol>
<li> Here is my first step. </li>
<li> Here is my second step. </li>
</ol>
<h2> Creating links </h2>
<a href="http://www.yahoo.com"> Yahoo ! </a>
<h2> Including graphics </h2>
<img scr="picture.gif" width=300 height=200>
</body>
</html>
Step 10 Add a table.  The <table> tag begins the table and the </table> tag ends the table.  The <tr> tag begins a new row in the table and the </tr> tag ends a row in the table.  The <td> tag begins a new cell in a row and the </td> tag ends a new cell in a row.  The table below has three rows and three cells in each row.  Resave the file first.html and view the changes in Internet Explorer by going to View/Refresh.

<html>
<head>
<title> My First Webpage </title>
</head>

<body  bgcolor="yellow" text = "blue">
<h1> Computer Science 100 </h1>
Welcome to my <font size="6" face="Arial"> first </font> web page.
I am <strong> thrilled </strong> to be learning HTML.
<h2> Bulleted and ordered Lists </h2>
<ol>
<li> Here is my first step. </li>
<li> Here is my second step. </li>
</ol>
<h2> Creating links </h2>
<a href="http://www.yahoo.com"> Yahoo ! </a>
<h2> Including graphics </h2>
<img scr="picture.gif" width=300 height=200>
<h2> Using tables </h2>
<table border="5" bordercolor="#000080">
<tr>
<td> </td>
<td>Babies</td>
<td>Adults</td>
</tr>
<tr>
<td>Deer</td>
<td align="center">10 </td>
<td align="center">13 </td>
</tr>
<tr>
<td>Bear</td>
<td align="center">25 </td>
<td align="center">50 </td>
</tr>
</table>
</body>
</html>