e-Lab at AU : Build an e-Portfolio | Find useful tools and resources | Network with others | Contact us

Skip To Content

Athabasca University e-Lab

The Very Very Basic Building Blocks of a Webpage: Structuring Content

In this, the first of two short introductory tutorials, you will learn how to begin to build a webpage using Hypertext Markup Language, specifically HTML5. In the second tutorial, we will be applying the design elements to the page using a Cascading Style Sheet, or CSS3. However, here you will be laying out bare bone website content (Doctype Declaration, Head Tag, Header Elements, Body Tag, Hyperlinks, Images, and Lists) using the HTML tagging schema. There are a great number of things you can add to a website, but this will get you started for on a single webpage. You will test the preliminary schema simply by dragging the file into your browser window, so there is no need to worry about uploading the file yet. There are examples of HTML all over the web; for most pages you can right-click on page to “view source.” This may seem somewhat intimidating at first, but once you can start to see the basic structures, you will be able to see the logic behind the tags and how they are formatted.  

Welcome to creating a webpage!

To begin, open a word processor, such as TextWrangler or Notepad. You will be creating the content on this page and saving it as a file with a .html extension. You can call the file anything you like, but for now, let’s call the file index.html. I'd recommend that you start the tutorial with creating a new folder on the desktop called "HTML Files" and put your HTML in there. You will later store your images and style sheet within subfolders stored here too.

The first thing you need to do is declare what kind of document this is. You are writing an HTML document, so you will begin your Document Type Declaration with:

<!DOCTYPE HTML>

This tag informs the browser of the format of the document it is reading so it can properly render the page.

You will then begin your document with HTML Element.

HTML consists of tags, which have to be opened and closed.  These tags often contain text, images, meta tags, or even other tags. When you want to close a tag, add a forward slash (/) and repeat the tag to close it.  For example, <p>Some text</p>.

In the case of HTML Element, your tags will read:

<html>
</html>

Tags often contain attributes as well as the main tag itself.  Attributes serve to modify or describe a tag, and are in the following format: attribute=”value”.  For example, you may want to set the language of an HTML document. To do so, you would add the lang attribute with a value of “en” to the <html> tag.  Your <html> tag would then look like this:

<html lang=”en”>
</html>

Attributes only appear in the opening tag, and should not be repeated in the closing tag.

<Hint>

For each new element you begin to add, may want to indent, not because it changes the way it displays online, but because it makes it easier to keep track of the start and end tags.

</Hint>

After you open your <html> tag, you need to create your HTML header, or <head></head>, section.  The <head> section contains metadata about your HTML document, such as the document’s title, any CSS or javascript it references, or keywords. 

An example of this is the charset meta tag.  For most web browsers, you can use the character encoding schema designed for unicode, the abbreviation for which is utf-8, so your tag will read <meta charset=”utf-8” />.  You will notice that there is no closing tag on the <meta> tag.  This is because we have included the closing slash at the end of the tag.  This is a way of quickly closing the tag for certain HTML tags that don’t normally contain content.

The <head> section of your page also includes the Title tag, <title>, which appears on the browser tab and/or title bar, and can be any meaningful title you want to give the page. For now, let’s try creating the title “My Home Page.”  Your HTML would read:

<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”utf-8” />
  <title>My Home Page</title>
</head>
</html>

The <head> section will also include information about the CSS, but for now let’s close the <head> section with the </head> tag and concentrate on the content.

Your will need to create the main body of the webpage, and do so with the body tag. This is done the same way as the other tags, with a start and end tag, or
<body>
</body>

What goes in between those tags is what makes up the basis of your webpage, so this is really where all your content is going to go. For now, let’s come up with a phrase like
“Welcome to my academic website. Here you can find exciting material about my work. ” Although that is just one line, we are going to treat it as a paragraph, since the paragraph tag is used to represent lines of text. Enclose it in a <p> tag.

Your webpage should look something like this now:

<!DOCTYPE HTML>
<html lang=”en”>
  <head>
    <meta charset=”utf-8”>
    <title>My Home Page</title>
  </head>
   
  <body>
    <p>
      Welcome to my academic website. Here you can find exciting material about my work.
    </p>
  </body>   
</html>

Try saving your file. Drag and drop it onto your browser, and see if you can see your page!

This, of course, is just the beginning. There are a few more things you might like to do to jazz up your web page.

You might like to divide up your page using Headers. These are different from the Head Section of your site; they usually appear as bolded, larger text blocks. <h1> being the largest header, and <h6> being the smallest.

Try putting a header in your HTML before your paragraph. You can experiment with different sizes, but try <h1> to begin with: <h1> Introduction to My Site</h1>

You may also want to include some hyperlinks in the body of your text. To create a hyperlink, you will want to create a tag that anchors <a> and add the href attribute (Hypertext Reference).  The href attribute will point the browser to the link you want include. It will look like this:

<a href = “https://elab.athabascau.ca”>

Since you want to have something for people to click on, you would then add some text to attach the link to, then close the tag.  Let’s make a link called The Athabasca University e-Lab. It will look like this:

<a href=“https://elab.athabascau.ca”>The Athabaca University e-lab</a>

You use the same sort of tag to create an email contact link. Here the link, rather than pointing to a URL starting with http://, points to a special address called mailto:

So, in this case, your tag would look like:

<a href=“mailto:elab-project@athabascau.ca”>The AU e-lab project team</a>

By now your webpage should look something like this:

<!DOCTYPE HTML>
<html lang=”en”>
  <head>
    <meta charset=”utf-8”>
    <title>My Home Page</title>
  </head>
   
  <body>
    <h1> Introduction to My Site</h1>
    <p>
      Welcome to my academic website. Here you can find exciting material about my work.
    </p>
    <p>You can find some off my favorite tools in the tool cupboard off linked off of <a href = “https://elab.athabascau.ca”> The Athabaca University e-lab </a></p>
    <p>If you would like to find out more about the tools in the cupboard, or suggest some more to add, you can write to <a href=“mailto:elab-project@athabascau.ca”> The AU e-lab project team</a> with your inquiries.</p>
  </body>   
</html>

You might also want to include an Ordered List (<ol></ol>), one that is enumerated, or an Unordered List (<ul></ul>), say of tools you like from the tool cupboard. In that case, you would nest list items (i.e. <li>item</li> within an unordered list.

Your site should be looking something like this by now.

<!DOCTYPE HTML>
<html lang=”en”>
  <head>
    <meta charset=”utf-8”>
    <title>My Home Page</title>
  </head>
   
  <body>
    <h1> Introduction to My Site</h1>
    <p>
      Welcome to my academic website. Here you can find exciting material about my work.
    </p>
    <p>You can find some off my favorite tools in the tool cupboard off linked off of <a href = “https://elab.athabascau.ca”> The Athabaca University e-lab </a></p>
    <p>My favorite tools are:
      <ul>
        <li> <a href = "http://tools.elab.athabascau.ca/tools/wordle">Wordle</a></li>
        <li> <a href = "http://tools.elab.athabascau.ca/tools/zotero">Zotero</a> </li>
        <li> <a href = "http://tools.elab.athabascau.ca/tools/voyant">Voyant</a> </li>
        <li> <a href = "http://tools.elab.athabascau.ca/tools/tapor-20">TAPoR 2.0</a> </li>
      </ul>
</p>
    <p>If you would like to find out more about the tools in the cupboard, or suggest some more to add, you can write to <a href=“mailto:elab-project@athabascau.ca”> The AU e-lab project team</a> with your inquiries.</p>
  </body>   
</html>

Finally, you may want to include a smiling picture of yourself, or in fact, pictures of just about anything you’d like. You will do this with an Image Element (<img/>).

Keep this picture within an images folder inside the HTML Folder on your desktop. Since the image is stored in the same folder as your HTML files, this will allow you to use what is known as a relative path to call up the image source attribute (<img src=””>). A relative path is understood by the browser as being relative to the HTML file. <img src=”image.jpg” /> tells the browser the image is in the same location as the HTML file.  <img src=”images/image.jpg”/> tells the browser that it the image can be found in a folder named images in the same location as the HTML file.

You will also want to modify the image size within the tag, so that it appears in the size you need it.  You can do this with the width and height attributes. Let’s practice with an image that is 200 pixels high by 200 pixels wide.

For screen readers and other accessible browsers, you should also use the alt=”” attribute.  This is a text-based description of the image you are including in the HTML document.

Your image tag would look something like this:

 <img src="images/smile.png" alt="Smiling" width="200" height="200"/>

Like the <meta> tag earlier, the slash at the end of the <img/> element closes it for you, so you do not need to add another tag to close the element.

Your webpage should now look something like this:

<!DOCTYPE HTML>
<html lang=”en”>
  <head>
    <meta charset=”utf-8”>
    <title>My Home Page</title>
  </head>
  <body>
    <h1> Introduction to My Site</h1>
    <p>
      Welcome to my academic website. Here you can find exciting material about my work.
    </p>
    <p>You can find some off my favorite tools in the tool cupboard off linked off of <a href = “https://elab.athabascau.ca”> The Athabaca University e-lab </a></p>
    <p>My favorite tools are:
      <ul>
        <li> <a href = "http://tools.elab.athabascau.ca/tools/wordle">Wordle</a></li>
        <li> <a href = "http://tools.elab.athabascau.ca/tools/zotero">Zotero</a> </li>
        <li> <a href = "http://tools.elab.athabascau.ca/tools/voyant">Voyant</a> </li>
        <li> <a href = "http://tools.elab.athabascau.ca/tools/tapor-20">TAPoR 2.0</a> </li>
      </ul>
</p>
    <p>If you would like to find out more about the tools in the cupboard, or suggest some more to add, you can write to <a href=“mailto:elab-project@athabascau.ca”> The AU e-lab project team</a> with your inquiries.</p>
    <p>Thanks for stopping by. </p>
    <p><img src="images/smile.png" alt="Smiling" width="200" height="200"><p>
  </body>   
</html>

Final Tips

Bold / Underline / Italics
If you would like to bold, underline, or italicize text, you can use the following tags sets:

<strong>bold text</strong> or <strong> bold text</strong>
<u>underline text</u>
 <em>italicize</em>

However, you may “style” your page using CSS instead.  You can learn more about this in another Workshop.

Special Characters

There may be some Special Characters you would like to include. Characters such as the ampersand (&) and quotation marks (“) may not translate in the webpage, nor will accented characters such as é, ç, or ü. In HTML, these can be included by using HTML Entities, which are encoded forms of the character.  For example, to include the character é, you would use the HTML Entity &eacute;.  To include an ampersand, you would use the HTML Entity &amp;. When the browser renders the HTML, it will replace the HTML Entities with the correct character.

For a full list of HTML Entities see: http://www.w3schools.com/html/html_entities.asp

Validation

As easy as it may be to tag content in HTML 5, it is very easy to accidentally forget to close a tag or include quotation marks. There are a number of sites like the W3C Markup Validation Service (http://validator.w3.org) that will allow you to upload your HTML file to see if it validates.