Practice Making A Site
Right Tool For The Job
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++ or 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.
Practice Making a Simple Web Site
Start by making sure the browser knows you are writing an HTML document. Declare your intention by typing:
<html>
</html>
Congratulations, you are on the right track!
Head and Body Tags
Let's expand on that. What should each site have? A head and a body!
<html>
<head>
</head>
<body>
</body>
</html>
Title Tag
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>
Various Headings
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>
Inserting Links
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>
Check Your Work
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.
Unordered and Ordered Lists
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>
Adding Images
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>
Nuances to the Image Tag
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>
Check Your Exercise
Compare what you have gotten with what I have here. Do they look similar?
Congratulations, You Have Created Your First Web Page!
Moving On: CSS
Doesn't look too beautiful? That's all right! Let's talk about CSS.
