Learn HTML: Part 2

In part one of this series you got an introduction to HTML, and you saw the basic structure for an HTML document. You saw that the <body> of your document contains the content that the user will see within the browser window, but just added some simple text. In this article, you’ll see how to add and lay out the content within the <body> so that it looks more like the types of web page you are used to seeing. You’ll see how to do this using heading tags and paragraphs. You’ll then learn how to use images on your page.

Before you get started, fire up WebMatrix and load the web site that you used in the previous article. You’ll be building on that as you go along. If you don’t have WebMatrix, you can download it from http://www.microsoft.com/web/webmatrix. You don’t need to have it to write the HTML, but you’ll see that using it will make the task much easier.

Header Tags

You might be familiar with using headers in a word processor. These are typically used as ‘titles’ that separate your text. For example, in a document like this work, the words ‘Header Tags’ immediately above this are a ‘Heading 1’, and a subsection of this section would be defined using ‘Header 2’ etc. These can be used within HTML too, to break a document down into sections using <h1>, <h2>, <h3> etc.

Here’s an example:

image 001

Here’s the code for this page.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>My first HTML in WebMatrix</title>
   </head>
   <body>
      <h1>My first Html Page</h1>
         This is some text within my first HTML page
         <h2>Using Headers</h2>
            You can use headers to divide your text up neatly into sections
            <h3>Sub headers</h3>
               This is a h3 sub header within the h2 'Using Headers' section
            <h3>More sub headers</h3>
               This is another h3 sub header within the h2 'Using Headers' section
               <h4>Sub-Sub headers</h4>
                  This is a h4 within the h3 within the h2. I think you're getting the point now :)
         <h2>And back to a main header.</h2>
            So now we're back at a top level header.
   </body>
</html>

You might have noticed, as you were typing, that whenever you type an HTML tag in WebMatrix (for example <h1>), then WebMatrix will automatically generate the closing tag (i.e. </h1>) for you. Just a nice reason to use an editor like this, and have the closing tags generated automatically for you.

Using Paragraphs

You might have noticed from the HTML above that it’s a little untidy where the headers are stored within <h> tags such as <h1>, <h2>, but the text is just hanging loose within the page. It makes your page more readable if you enclose it in a paragraph tag (<p>), as well as making it easier to control the style, such as font, alignment and color, later on as you learn styling.

Here’s the updated code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My First HTML Page</title>
    </head>
    <body>
        <h1>My first Html Page</h1>
            <p>This is some text within my first HTML page</p>
            <h2>Using Headers</h2>
                <p>You can use headers to divide your text up neatly into sections</p>
                <h3>Sub headers</h3>
                    <p>This is a h3 sub header within the h2 'Using Headers' section</p>
                <h3>More sub headers</h3>
                    <p>This is another h3 sub header within the h2 'Using Headers' section</p>
                    <h4>Sub-Sub headers</h4>
                        <p>This is a h4 within the h3 within the h2. I think you're getting the point now :)</p>
            <h2>And back to a main header.</h2>
                <p>So now we're back at a top level header.</p>
    </body>
</html>

You  can also see that in this listing I’ve indented the markup to make it easier to read. When browsers read HTML they’ll ignore the indentation so it will still work even if it is made more human readable like this.

Also, when using WebMatrix, you’ll see that the tool gives you subtle ‘guides’ to help read your HTML when it’s indented. You can see them here as the subtle vertical lines connecting <body> with </body> etc.

image 002

Note that you don’t have to close the <p> tag with a </p>, as browsers consider it optional, but it’s good practice for you to do it anyway to make your HTML easier to read and easier to maintain.

Using Pictures

What’s a web page without pictures in it? In HTML, the <img> (or ‘Image’) tag is used to define a picture. You have to tell it where the picture is located using the src (for source) attribute. So, if, for example the image is in the same directory as your page, you simply use the image name. If it’s somewhere else, for example in a different directory on the same server, you have to provide the path to the image. Or, if the image is on a different server, you have to specify the address (or url) of that server and where the image is on it.

Let’s start with a simple case, where the image is in the same directory as your page.

To do this in WebMatrix is really easy. Make sure that the ‘Files’ workspace is open, and you’ll see the name of your web site. In this case it’s Learn HTML.

image 003

Right click on the Learn HTML folder, and you’ll see an option to ‘Add Existing File’

image 004

Select this, and find a file on your computer. In this case I’m using a file called ‘Penguins.jpg’. WebMatrix will add the file to your website.

Note: It’s important to do it this way. Lots of web site editor programs allow you to drag and drop an image from your hard drive directly onto a page. This ends up generating an <img> tag with the source for the image set to the location on your hard drive. When you then load the page onto an internet server, the server cannot see your hard drive, and as such users get a broken experience when browsing your page.

Now that you have an image in the same folder as your page, you can easily add it to your page with the <img> tag. Here’s an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My First HTML Page</title>
    </head>
    <body>
        <h1>My first Html Page with an image</h1>
            <p>This is a picture of some penguins.</p>
            <img src="Penguins.jpg" />
            <p>Pretty cute, huh?</p>
    </body>
</html>

When you run the page, you might encounter a problem that people typically have when using images within web pages, and that is that your picture is way too big for the page. Here’s what happened for me:

image 005

There are two things that you can do to fix this. You’ll likely end up using a combination of both.

Setting the image size

The first is to define the size that you want the browser to use when rendering the picture. This image came straight from Windows Sample Pictures, which gives me a 1024x768 pixel image, so it doesn’t fit fully on the screen. Of course your experience may be different as you are likely using a different image.

Fortunately the <img> tag allows me to specify the size, like this:

<img src="Penguins.jpg" width="600" height="450"/>

So now when I view my web site, I get this:

image 006

Which I am sure you agree looks much better.

Have you spotted the problem with this approach?

It’s this – the image has a lot of pixels (1024x768 or 786,432) but we only render 600x450 (270,000). However, the user that views this site still has to download all 786,432, in order to see only 270,000, so they are downloading more than the number of pixels that they need.

This will make your website really slow, and users don’t like that. The solution is to create a thumbnail. You’ll see how to do that in the next section.

Creating Image Thumbnails

Windows ships with a simple tool called ‘Paint’ which can be used to easily make thumbnails. Launch ‘Paint’ and drag and drop your image onto it. The image will load and render within paint. Then press the ‘Resize’ button in the toolbar

image 007

This will launch the ‘Resize and Skew’ dialog. At the top of this dialog, select ‘Pixels’ and type the size that you want. If the ‘Maintain Aspect Ratio’ button is checked, then the aspect ratio (i.e. shape) of the image will be maintained. So, if, for example your picture is a wide rectangle, which is most commonly the case, the relative dimensions after resize will be the same, and you’ll get a wide rectangle.

For this image, I typed in 600 horizontal pixels, and Paint automatically set a width of 450 pixels to maintain the aspect ratio.

image 008

Press OK, and the image will be resized.

Next on the file menu, select ‘Save As’ and save the image with a new filename.

image 009

I chose ‘Penguins_thumb.jpg’ for the file name.

Now, go back to WebMatrix and add your thumbnail to your website in the same way as you added the original picture.

You can then edit your <img> tag to point to the thumbnail instead of the original picture.

image 010

Now when you run your page, you render the thumbnail.

image 011

Tip: You may have noticed that when I changed the <img> tag to render the thumbnail, I removed the ‘height’ and ‘width’ attributes. If your thumbnail fits your page, I recommend that you do this, because if the browser has to render the image in a different height and width from the actual height and width of the image, it has to spend processor cycles figuring out the new size of your image, which, if you have a lot of images can significantly slow down the time it takes before the user can read your content. As such I’d always recommend that you pre-size your images into thumbnails with the exact dimensions that you want.

Summary

In this article you saw how to use heading tags, paragraphs and images within your HTML. You saw how heading tags can be used to create a better reading experience, separating your text logically. You also saw how the text of your page is defined using paragraphs. Finally you look at how to use pictures in your page, including how to generate thumbnails using free tools, and how thumbnails will speed up your web pages.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!