Acme Web Design Info
Build Your First Web Page with HTML
Contents
Related Articles
Putting it all Together
Okay, now it's time to apply everything you've learned so far. Instead of copying and pasting code this time, I want you to actually type everything out in your text editor. It is good practice to type code out because it helps your mind remember in a different way. I will provide some code at the end of this section that you can copy and paste so you can double-check yourself.
We will be creating an HTML document that looks like this one.
Let's start out with the <html>, <head> and <body> tags. Remember that the <head> and <body> tags go inside of the <html> tags.
<html>
<head>
</head>
<body>
</body>
</html> Now lets add the title of the page:
<html>
<head>
<title>Bludge's Music Collection - Home Page</title>
</head>
<body>
</body>
</html> Now it's time to add some content. We will start with the topmost heading, <h1>:
<h1>Welcome to Bludge's Music Collection</h1> Followed by some subheadings and with a paragraph below each one:
<h2>Why You Might Want to Know About My Collection</h2>
<p>For years now, people have been asking me all about my music collection. Every time I walk to the store, I am barraged by masses of people who want to know what I'm listening to. I guess I just look happy. Well, this collection is for all of you!</p>
<h2>A List of Bludge's Music</h2>
<p>Below is the unofficial Bludge music collection. Stay tuned (get it?!) for more!</p> Next we have the table. Remember how easy this is? Here's the code for the table headings followed by three table rows:
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<th>Band</th>
<th>Year</th>
<th>Genre</th>
</tr>
<tr>
<td>Fleetwood Mac</td>
<td>1977</td>
<td>Classic Rock</td>
</tr>
<tr>
<td>Pantera</td>
<td>1991</td>
<td>Hard Rock</td>
</tr>
<tr>
<td>Gordon Lightfoot</td>
<td>1968</td>
<td>Folk</td>
</tr>
</table> Great! Now we need a little extra space after that table, so we'll put in a couple of line breaks:
And finally, we have the hyperlink back the the Acme Web Design home page:
<a href="http://www.acme-web-hosting.info/">Return to the Acme Web Design home page</a> When we slap all that content between the <body> and </body> tags, we get the entire code for the web page, which looks like this:
<html>
<head>
<title>Bludge's Music Collection - Home Page</title>
</head>
<body>
<h1>Welcome to Bludge's Music Collection</h1>
<h2>Why You Might Want to Know About My Collection</h2>
<p>For years now, people have been asking me all about my music collection. Every time I walk to the store, I am barraged by masses of people who want to know what I'm listening to. I guess I just look happy. Well, this collection is for all of you!</p>
<h2>A List of Bludge's Music</h2>
<p>Below is the unofficial Bludge music collection. Stay tuned (get it?!) for more!</p>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<th>Band</th>
<th>Year</th>
<th>Genre</th>
</tr>
<tr>
<td>Fleetwood Mac</td>
<td>1977</td>
<td>Classic Rock</td>
</tr>
<tr>
<td>Pantera</td>
<td>1991</td>
<td>Hard Rock</td>
</tr>
<tr>
<td>Gordon Lightfoot</td>
<td>1968</td>
<td>Folk</td>
</tr>
</table>
<br /><br />
<a href="http://www.acme-web-hosting.info/">Return to the Acme Web Design home page</a>
</body>
</html> Here is the same code, which you can copy and paste into your hello.html document to double-check your work:
Congratulations! You have just built your first full-fledged HTML web page! Now, just to be thorough, let's re-cap what we covered in this tutorial.
|
