1) Open a new page. While a new page can be a blank page
there are some elements that make the page conform to standards.
These look like this:
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN">
<html>
<head>
Put your META tags and Scripts here
</head>
<body>
Put your display elements here
</body>
</html>
2) Save this document as index.html This is normally the first page displayed on your website.
3)Let us add a title to our page. Type "My Webpage Title"
This will display in the title bar of the browser and is located in the <head> tags. It looks like this: <title>My Webpage Title</title>
4)Inside the <body> tags, let us enter some basic text. Type whatever you want here.
Headlines look like this: <h1>Headline 1</h1>.
Paragraphs look like this: <p>Paragraph</p>
Normal text can just be typed.
5) Let us change the size of our text to "Size +3"
Enclose your normal text in these tags: <font size="+3">Your text</font>
6) Let us change the font of our text to "Arial, Helvetica, Sans Serif"
Add this to your font tag in item above: face="Arial, Helvetica, Sans Serif".
7) Let us change the color of our text to purple.
Add this to your font tag: color="purple".
8) Let us add a link to an outside website. Link to the Amazon.com. The address is "http://www.amazon.com"
On the next line add this line: <a href="http://www.amazon.com">Amazon</a>
The anchor tag has a property href="". This tells us where you want to go. The text outside the href is displayed on the screen
with special properties that allow you to click on the text and go to Amazon.com.
9) Let us add a table with four rows and three columns. <table> = Create Table
<tr> = Table Row
<td> = Table Data (cell) - Your cell contents
<td> = Table Data (cell) - Your cell contents
<td> = Table Data (cell) - Your cell contents
</tr> = Close Table Row
<tr> = New Table Row
<td> = Table Data (cell) - Your cell contents
<td> = Table Data (cell) - Your cell contents
<td> = Table Data (cell) - Your cell contents
</tr> = Close Table Row
<tr> = New Table Row
<td> = Table Data (cell) - Your cell contents
<td> = Table Data (cell) - Your cell contents
<td> = Table Data (cell) - Your cell contents
</tr> = Close Table Row
<tr> = New Table Row
<td> = Table Data (cell) - Your cell contents
<td> = Table Data (cell) - Your cell contents
<td> = Table Data (cell) - Your cell contents
</tr> = Close Table Row
<table> = Close Table
10) Make the table so that it is 400 pixels wide.
Add this to the <table>: width="400".
11) Let's merge the center two cells of the second row
Go the the second <tr> and the second <td> and add to this <td>: colspan="2" then
delete the next <td> tag entirely.
12) Create a subfolder called "images" in Windows
13) Let us first copy a graphic into the folder we created.
14) Let us put this graphic (image) on our page.
The tag for this is: <img src="imagename.gif" width="100" height="100" alt="Description">
You must use the actual name of the imagefile. The width and height is defined by the size and proportion of the original image. The
description is self-explanatory but it will be displayed on mouse-over in Internet Explorer.
15) Let us add a bulleted list
Lists fall into three categories: Unordered (bulleted); Ordered (numbered); Definition (not decorated). These tags are (respectively): <ul> with lines defined by <li>
<ol> with lines defined by <li>
<dl> with lines defined by <dd>
16) Open up another new document, save it in the folder we created earlier as "more_junk.html." Type some text in it and save it again.
17) In your index.html document, let us create a link to "more_junk.htm" document.
This is just like adding an external link (item 8 above). Use the anchor tag and the href property but the actual
filename will be addressed as a local file. It will look like this: <a href="more_junk.html">More Junk</a>
