Getting Started with HTML – Part 4

In the previous three installments of Getting Started with HTML I gave you a brief history of HTML, showed you how to make a very basic web page, and showed you how to place structural elements, tags, and headers into your web page. If you missed any of those you can always take a look at them here: HTML Tutorial Part 1, HTML Tutorial Part 2, HTML Tutorial Part3.

To begin, let’s once again open the web page that we’ve been working on in the previous blogs.  For this final installment of Getting Started with HTML, I’ll show you how to add some more content elements as well as pictures.  Let’s get started with adding some more content elements into your page.

Since we added a footer section last time, let’s go ahead and actually put something in the footer. Most footers typically contain a few different things ranging from the author of the document, copyright information, links to the terms of use, and an address. In our footer section, we’ll go ahead and add a simple address. Scroll down to the bottom footer and inside the footer tag insert the following code

<address> First and Last Name

Street Address

City, State, Zip

Phone Number

</address>

Once you add that information in your notepad it should
look like this:

Go ahead and save your web page now and open it up in your browser to see how the footer looks. You should notice that most browsers render the address in italic and even though you used multiple lines in your notepad the address will run together on a single line.

Although having your address on a single line is fine, there are ways to separate your address so that it doesn’t look like it all blends together. To do that we’ll add a bullet symbol at the end of each line.

To do that you are going to add the symbol &bull; to the end of each line in the address section. Save after doing this and refresh your browser. The information in the footer section is now separated by bullets and is easier to read.

Lists can be an important part of a web site. There are three types of lists that can be used in web design, one is an ordered list, the other is an unordered list, and finally there is a description list. Most of the time you will be using an unordered list, but it’s always good to know how to create all three of them. Let’s start with adding an ordered list under your first paragraph. In order to do this you’ll add the following code directly under your closing </p> tag.

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

Under that we’ll go ahead and add an unordered list with the following code.

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

You’ll notice that the only difference between the ordered and unordered lists are the opening and closing tags. The ordered list will start and end with <ol> and </ol> while and unordered list will start and end with <ul> and </ul>. Just so we can compare all three at once we’ll add the description list under the unordered list using the following code.

<dl>

<dt>Item 1</dt>

<dd>- Description of Item 1</dd>

<dt>Item 2</dt>

<dd>- Description of Item 2</dd>

<dt>Item 3</dt>

<dd>- Description of Item 3</dd>

</dl>

 

 

 

 

 

 

 

 

 

 

Save your work and refresh your browser once more to see the difference between the lists.

Now for something that’s always fun, adding pictures and images into your website. Instead of having just a plain old Welcome! in the header section, how about an image instead? To add images into your web page you have to use the following code.

<img scr=“file” alt=“text”/>

When dealing with images it is usually best to also add the width and height that you want the image to be or it will just take on the size of the original image. To do that just add the following code after alt=“text”

width=“value” height=“value”

Save your work and refresh your browser once more. You should now see your image in the header section.

There are so many different things that you can do inside a single web page and now that you know some of the basics of coding for a simple HTML page, there’s no reason why you shouldn’t be able to code more complex pages. I hope you’ll join me next time when we start building a multi-page website inside of Dreamweaver. – Toni

 

    Leave a Comment

    Your email address will not be published.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.