Filling out our webpage with HTML (MFW#4)

“My First Website” series navigation: first postwhole series


HTML headings and paragraphsIn this installment of My First Website, we’ll build upon the simple web page we created in the previous post in the series. You’ll learn about headings and how to create them as well as dividing up your content into paragraphs. Yes, slowly but surely we are getting into more of the “meat and potatoes” of HTML!

But before we can tuck in our napkin and dine on some HTML goodness, let’s get your web page ready to be viewed on your own browser. And it’s very easy to do.

Let’s begin…

Getting ready

The first thing you need to do is to take the mark up you learned in “My first Website #3″, copy and paste it into a new document in either NotePad (Windows) of TextEdit (Mac), and then save it. Here’s that mark up if you missed it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My First Website</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>

<body>
<p>Here is some sample text that will appear in your browser.</p>
</body>

</html>

Now you need to save it. But you have to make sure to save it in a special way. The webpage itself is encoded using UTF-8 so you need to save the file using UTF-8. Take a gander below…

NotePad:

After copying and pasting the above mark up, choose “Save As…” from the file menu in NotePad. Then, in the “Encoding” drop down menu choose UTF-8. Enter the filename as index.html. Finally, save it the folder called “website” that you created in “My First Website #1“. (Design Projects – My First Website – website.) Done!

TextEdit:

First, make sure that your new document is a plain text document. Look in the “Format” menu at the top. If you see “Make Rich Text” then your document is already in plain text. If you see “Make Plain Text” in the menu, choose that.

After copying and pasting the above mark up, choose “Save As…” from the file menu in TextEdit. Then, in the “Encoding” drop down menu choose UTF-8. Enter the filename as index.html. Finally, save it the folder called “website” that you created in “My First Website #1“. (Design Projects – My First Website – website.) Done!

Viewing ‘index.html’ in your browser

It’s very easy to see what this webpage will look like without the need to have it hosted somewhere. All you have to do is start up your favorite flavor of browser (FireFox, Safari, Internet Explorer, etc.), go to the “File” menu, choose “Open File…” and then find the index.html document that you just created. Tada! You should be able to see our rather scanty webpage.

Now let’s spice it up a little!

Add a heading

Right after the opening <body> tag, we’re going to add a level 1 heading. It’s made using these opening and closing tags: <h1> </h1>. Let’s put one in! (To save space in this and subsequent posts, I’m not going to repeat the full markup. Ok?)

<body>

<h1>A Level 1 Heading</h1>
<p>Here is some sample text that will appear in your browser.</p>

</body>

Don’t worry about the empty lines in-between the tags. I could put 100 empty lines and the result would be the same. Why? Because if you want empty lines, you have to tell the browser using HTML!

View the result: Level 1 Heading

Add some more paragraphs

Next, using some Lorem Ipsum, we’ll add a few paragraphs with the <p> </p> paragraph tags. (By all means, please copy and paste the text below, I would never expect you to type out Lorem Ipsum!)

<body>

<h1>A Level 1 Heading</h1>

<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus. Donec ornare arcu id erat.</p>

<p>Aliquam et nisl vel ligula consectetuer suscipit. Morbi euismod enim eget neque. Donec sagittis massa. Vestibulum quis augue sit amet ipsum laoreet pretium. Nulla facilisi. Duis tincidunt, felis et luctus placerat, ipsum libero vestibulum sem, vitae elementum wisi ipsum a metus.</p>

</body>

View the result: Two Paragraphs

Add a subheading and more paragraphs

Headings have 6 levels: 1 being the largest and 6 being the smallest. You write them this way:

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

View an example here: Headings list

Each browser will size them differently unless you use some CSS to change how they appear. You can mix and match any number of levels and even use the same level many times on a single webpage — there aren’t any rules. So, let’s add a subheading using an <h3> </h3> tag along with some more paragraphs:

<body>

<h1>A Level 1 Heading</h1>

<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus. Donec ornare arcu id erat.</p>

<p>Aliquam et nisl vel ligula consectetuer suscipit. Morbi euismod enim eget neque. Donec sagittis massa. Vestibulum quis augue sit amet ipsum laoreet pretium. Nulla facilisi. Duis tincidunt, felis et luctus placerat, ipsum libero vestibulum sem, vitae elementum wisi ipsum a metus.</p>

<h3>A Level 3 Heading</h3>

<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus. Donec ornare arcu id erat.</p>

<p>Aliquam et nisl vel ligula consectetuer suscipit. Morbi euismod enim eget neque. Donec sagittis massa. Vestibulum quis augue sit amet ipsum laoreet pretium. Nulla facilisi. Duis tincidunt, felis et luctus placerat, ipsum libero vestibulum sem, vitae elementum wisi ipsum a metus.</p>

</body>

View the result: Subheading

Your homework

Have some fun playing around with the 6 different levels of headings as well as adding more paragraphs. I know that our website still doesn’t look like much, but we’re getting there!

In the next post we’ll finally take a look at adding CSS to our web page. See you then!

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



2 Responses:

  1. Karen

    Hand coding really isn’t that hard, is it? Thanks for the post!

  2. Tom

    Been enjoying the series. Thanks for the articles!


Share your thoughts below: