Practice Making A Site
Before You Start
First, you need the right tool for the job. Download Notepad++ if you are using a PC; download TextWrangler if you are using a Mac.
Why these? These text editors recognize HTML and make it easier for you to see what you have typed. They also organize your tags by indentation and color.
Open Notepad++/TextWrangler
Create a new file. Go to File=>Save As... and save your now blank file as "index.html" into the folder where you chose to place your web site.
Let's Start!
Start by making sure the browser knows you are writing an HTML document. Declare your intention by typing:
<html>
</html>
Let's expand on that. What should each site have? A head and a body!
<html>
<head>
</head>
<body>
</body>
</html>
Now, as you remember, we want to name our site so that the user sees a nice title in his/her tabs or on top of the web browser window.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
</body>
</html>
Now that we have added a title, to the top, let's make sure our users know the heading for our web page. In addition, just for kicks, create a #3 heading somewhere.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> This Web Page Rocks! </h1>
<h3> This is a Size 3 Heading </h3>
<h3> This is a Size 3 Heading </h3>
</body>
</html>
Let's see if we can add some paragraphs.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> This Web Page Rocks! </h1>
<h3> This is a Size 3 Heading </h3>
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
</body>
</html>
Create 2 links within the second paragraph on a new line using the link break tag. You may choose any links you want. For the purposes of this exercise, links to http://icanhas.cheezburger.com/ and http://dogs.icanhascheezburger.com/ will be used.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> This Web Page Rocks! </h1>
<h3> This is a Size 3 Heading </h3>
<p> Paragraph 1 </p>
<p> Paragraph 2 <br />
<a href="http://icanhas.cheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Cat Picture Site</a><br />
<a href="http://dogs.icanhascheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Dog Picture Site</a>
</p>
</body>
</html>
Let's check what happened! Save your file. Open Firefox, Chrome, Opera, or Safari and click on File=>Open. Choose "index.html" from the folder where you saved it. Does the link work? Can you click on it? If not, check the syntax: HTML doesn't forgive tiniest mistakes.
Good job! Now, let's add an unordered and an ordered list to a third and fourth paragraphs.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> This Web Page Rocks! </h1>
<h3> This is a Size 3 Heading </h3>
<p> Paragraph 1 </p>
<p> Paragraph 2 <br />
<a href="http://icanhas.cheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Cat Picture Site</a><br />
<a href="http://dogs.icanhascheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Dog Picture Site</a>
</p>
<p>
<ul>Unordered List:
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ul>
</p>
<p> <ol>Ordered List:
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>
</p>
</body>
</html>
Save the page. Does it look like it is supposed to? Great work! Now, finally, let's add an image. Search for an image online, right-click it and choose "Save image as". Save an image of your choosing to the "images" folder. Remember - no spaces, all lower case letters.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> This Web Page Rocks! </h1>
<h3> This is a Size 3 Heading </h3>
<p> Paragraph 1 </p>
<p> Paragraph 2 <br />
<a href="http://icanhas.cheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Cat Picture Site</a><br />
<a href="http://dogs.icanhascheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Dog Picture Site</a>
</p>
<p>
<ul>Unordered List:
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ul>
</p>
<p> <ol>Ordered List:
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>
</p>
<img src="images/purrito.jpg" alt="Purrito" />
</body>
</html>
It is best to make sure the browser knows the height and width of your image - just in case. To find out your image properties, go to Paint (PC) or Preview (Mac). Open your image and go to Tools=> Adjust Image Size. You can see original image size there.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> This Web Page Rocks! </h1>
<h3> This is a Size 3 Heading </h3>
<p> Paragraph 1 </p>
<p> Paragraph 2 <br />
<a href="http://icanhas.cheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Cat Picture Site</a><br />
<a href="http://dogs.icanhascheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Dog Picture Site</a>
</p>
<p>
<ul>Unordered List:
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ul>
</p>
<p> <ol>Ordered List:
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>
</p>
<img src="images/purrito.jpg" alt="Purrito" height="500px" width="453px" />
</body>
</html>
You can link your image to another site. To do so, just add the <a> tag before and after the image tag.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> This Web Page Rocks! </h1>
<h3> This is a Size 3 Heading </h3>
<p> Paragraph 1 </p>
<p> Paragraph 2 <br />
<a href="http://icanhas.cheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Cat Picture Site</a><br />
<a href="http://dogs.icanhascheezburger.com/" title="I Can Haz Cheeseburger">Link to A Funny Dog Picture Site</a>
</p>
<p>
<ul>Unordered List:
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ul>
</p>
<p> <ol>Ordered List:
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>
</p>
<a href="http://icanhas.cheezburger.com/" title="I Can Haz Cheeseburger"><img src="images/purrito.jpg" alt="Purrito" height="500px" width="453px" /></a>
</body>
</html>
Compare what you have gotten with what I have here. Do they look similar?
Congratulations, You Have Created Your First Web Page!
Doesn't look too beautiful? That's all right! Let's talk about CSS.
