Your first web site Part 2 - HTML elements in detail

From Web Education Community Group
Revision as of 19:29, 23 August 2011 by Cmills (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Surfing the web is easy, creating the web is too!

Introduction

Welcome back! In the first part of this article series, we looked at how the web works, what tools you need to create a basic web page, and the basics of HTML pages and how they should be structured. In this part I will take you through the contents of the head and body of the sample web page template, showing you what all the different parts do. Download the template now if you haven’t already done so, by clicking on the previous link.

The table of contents is as follows:

The head of your document

a robot's head, representing the head of an HTML document

Now let’s look more deeply at the contents of the sample template’s head element. You can put a lot more information inside this element than I have included here, but I’ve elected to just keep it simple for now.

Linking to CSS

The first line is as follows:

<code><link type="text/css" rel="stylesheet" href="style.css"></code>

The link element is referencing the style.css file in the zip you downloaded above. It is saying find the CSS file named style.css, and apply the styles inside it to the HTML inside this document. You don’t need to worry about the type and rel attributes for now — just make sure you include them in your own examples in future.

The HTML title element

The next line is as follows:

<code><title>CV/Resumé template</title></code>

The title element specifies the title that will be shown in the title bar of the browser, as seen here:

The title bar of a web browser, displaying the contents of the HTML title element

Your document’s body

a robot's body, representing the body of an HTML document

Now for the contents of your document’s body element. Remember that the body holds all of the content people see when they visit your web page. Without any CSS applied to the page, the example template currently looks like this:

the html template without any CSS applied to it

You can see this in your downloaded code by going inside the 0-nostyle folder and loading the HTML page inside it in a browser. If you check this same file out using a text editor, you’ll see that the link element is not present in the head of the page, so no CSS is being applied to the HTML.

In this section I will go through all the HTML elements inside the body element, and explain what everything does. Along the way I will introduce you to many HTML elements and explain their functions. This is by no means an exhaustive HTML reference, but it should be enough to get your started.

For an exhaustive, detailed HTML reference, visit the Opera web standards curriculum.

The wrapper div: div elements

You’ll notice that the entire contents of the body element are also wrapped in a div element:

<code><div id="wrapper">
  ...''all the rest of the content is here''...
</div></code>

div elements are a generic container, or grouping element that you use to group other elements together when there isn’t another element that would do the job better. You can give a div an id or class element to give it an identity, but as it stands, the div will do nothing until you start to style the page with CSS. Below is another example — I have used a div to group together a list and an image as a profile.

Think of a div like a bag, which contains other elements. If you have a load of individual items that you want to keep together to serve a single purpose (like all the parts of a tent, to go camping with), and there isn’t a better element to do the job, then a div is a good idea.

a div element is a container of other elements, sort of like a tent contains all the pieces of a tent

What is the difference between an id and a class? you may ask. An id is a unique identifier, meaning that you can only have one of each id on a web page. A class on the other hand can be repeated as many times as you like. Note also that you can use whatever classes and ids you like in your HTML pages. They are used as identifiers to style parts of your page using CSS, as you’ll see later.

The profile section

Here we’ve got another div, with an id of profile to group this HTML section together. Let’s take a look at the new things:

<code><h1>CV/Resumé - Chris Mills</h1>
<div id="profile">
<img src="ChrisMills.jpg" alt="A picture of you">
  <ul>
    <li><strong>Address</strong>: My address, UK</li>
    <li><strong>Date of birth</strong>: 27/06/1978</li>
    <li><strong>Place of birth</strong>: Douglas, Isle of Man, UK</li>
    <li><strong>Nationality</strong>: British</li>
    <li><strong>Home phone</strong>: My home phone number</li>
    <li><strong>Mobile phone</strong>: My mobile phone number</li>
    <li><strong>E-mail</strong>: My e-mail address</li>
    <li><strong>Homepage</strong>: <a href="http://dev.opera.com">DevOpera</a></li>
    <li><strong>The date the application is sent</strong></li>
  </ul>
</div></code>

HTML Headings

<code><h1>CV/Resumé - Chris Mills</h1></code>

The h1 element is a heading, one of the most important types of HTML element on the Web. There are six levels of headings available to use — h1-h6 — although you shouldn’t really need more than three or four. You’ll notice, looking at my sample HTML template, that I only have one h1 on the whole document, then the next level of headings are h2, then h3. This creates what we call a heading hierarchy, with one most important heading, then less important headings below it in the hierarchy. You should be careful to structure your document sections and subsections like this, as it has many advantages for web pages, such as making them more findable on search engines like Google. You should never use headings just because you want a bigger text size for your normal paragraphs. That is a misuse of heading elements, and such desired style changes should be achieved with CSS instead.

Images in HTML

paintings hung in an art gallery

<code><img src="ChrisMills.jpg" alt="A picture of you"></code>

The image element is what you use to insert images into your web page using HTML. It is an empty element, meaning that it has no content inside it, and is effectively a single tag. It has two essential attributes:

  • src: The content of this attribute is a path pointing to the image to be displayed. In our case, it is just a file name, because the image file is in the same location as the HTML file. If the image were inside a directory called images in the same directory as the HTML file, the value of the src attribute would be images/ChrisMills_180x180.jpg
  • alt: This attribute contains a text description of the image, for the benefit of those who cannot see the images (some web users are blind, and others have images turned off in their browser). If the image is merely decorative, ie visual bling, then you should leave the alt attribute blank, ie alt="".

HTML Lists

<code><ul>
  <li><strong>Address</strong>: My address, UK</li>
  <li><strong>Date of birth</strong>: 27/06/1978</li>
  
  ''...the other list items go here...''
  
</ul></code>

To create a basic list, you need two elements:

  • ul: This element wraps the individual list items, defining the start and end of the list. ul stands for unordered list, and is to be used for lists where the order of the items doesn’t matter, such as a shopping list. This gives the items bullet points.
  • You can use ol instead of ul (there is a second list further down the code that uses this) to get numbers rather than bullets. ol stands for ordered list, and is for representing lists of items where the order does matter, such as the steps to follow when cooking a meal from a recipe
  • li: This element name is short for list item. Each item in the list appears inside one of these elements. You can include further elements inside list items such as paragraphs and images if you wish, or even other lists

A shopping list and a recipe next to each other to represent HTML lists

Links to other places

Next, I want to ask you to focus on the following line:

<code><li><strong>Homepage</strong>: <a href="http://dev.opera.com">DevOpera</a></li></code>

The a element is another one of the most important elements in HTML. It is this element that makes the Web a web. Why? Because it allows you to link a piece of text to any web page or resource you know the web address of. In this example, clicking on the text DevOpera on the template will immediate make your browser load up the page at http://dev.opera.com. The href attribute, containing the address of the web site to link to, is all you need inside the a element. Have a play with it when you make your own web page!

HTML emphasis: strong and em

<code><strong>Address</strong></code>

Displays as Address.

Here we have used the strong element to wrap important terms. This bolds the text in most browsers, but it does not just refer to the look of the text. It also means that the term enclosed in the element is more important than the surrounding text, or emphasised. There is also an em element, which most browsers render in an italic font, and can also be used for emphasis, depending on your preference.


<code><em>Address</em></code>

Displays as Address

Paragraphs

In the next document section, there is nothing we haven’t seen before except for the paragraph — p — element. This element is one of the most important HTML elements, along with the headings. Use this whenever you want to separate out a basic paragraph of text, which will be often. The browser will automatically add some spacing between paragraphs.

There is also a class attribute of value first on some of the p elements. You’ll find out what these are for in the CSS section.

<code>  <p class="first">Throughout my career I have done the following amazing things....blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah</p>
    
  <p>I have knowledge of the following tools...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    
  <p>I am accustomed to working to strict deadlines, and remain calm and patient under pressure. I am also very good at picking up new techniques and skills quickly when necessary, and disseminating important information. In addition, I believe one of my most notable qualities is my diplomatic/social ability, for example when resolving disputes.</p>
  
  <h2>Skills and Experience</h2>
  <p class="first">I have 7+ years experience in the field of XXXXXXX, including:</p>
    
  <ul>
    <li>7+ years of skill a, skill b and skills c.</li>
    <li>5+ years of skill d, skill e and skill f.</li>
    <li>3+ years of skill g and skill h.</li>
  </ul></code>

HTML data tables

A dining table to represent HTML tables

In the Education section of the page, we introduce something new — an HTML data table:

<code><h2>Education</h2>
    
<table>
  <thead>
    <tr>
      <th scope="col">Dates</th>
      <th scope="col">School or university</th>
      <th scope="col">Grades earned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>September 1996 - June 1999</td>
      <td>University of Bristol, UK</td>
      <td>BA (hons) Business studies and marketing at grade 2:2</td>
    </tr>
    <tr class="even">
      <td>September 1994 - July 1996</td>
      <td>St Mary's College, London, UK</td>
      <td>Four A levels: Maths at grade B; Chemistry at grade C; Physics at grade C; General Studies at grade C.</td>
    </tr>
    <tr>
      <td>September 1990 - July 1994</td>
      <td>Camden Comprehensive School, London, UK</td>
      <td>Ten GCSEs: four at grade A including Maths and Science; six at grade B including English.</td>
    </tr>
  </tbody>
</table></code>

The new elements here are as follows:

  • table: This defines the whole section as a table. The table starts where the opening tag is, and ends where the closing tag is
  • tr: a table row — each row of the table is contained in one of these elements
  • td: a table cell — each individual cell is contained in one of these elements
  • th: a table heading. This is a special type of table cell, promoted to a table heading. You should use these on the headings at the top of each column of the table
  • thead, tbody and the scope attribute: Don’t worry too much about these right now

The rest of the code

The rest of the code looks like so:

<code><h2>Employment History</h2>
    
<ol>
  <li>
    <h3>June 2005 to Present</h3>
    <p class="first"><strong>Regional Sales Manager, WidgetsCorp, London, UK</strong>: My current position involves developing a sales strategy to sell Widgets to the whole of Greater London, Essex and Sussex. I travel to customers, give presentations, liase with the marketing department to create more effective marketing literature, and take orders.</p>
  </li>
  <li>
    <h3>September 2003 to June 2005</h3>
    <p class="first"><strong>Assistant Sales Manager, Amazing Coffee Pots, London, UK</strong>: In this role I had to take orders and create presentations for the sales managers. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  </li>
  <li>
    <h3>September 2003 to June 2005</h3>
    <p class="first"><strong>Assistant Sales Manager, Another company, London, UK</strong>: In this role I had to blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  </li>
</ol>
    
<h2>Hobbies and interests</h2>
<p class="first">Outside work, my main interests are music, reading and traveling. I'm also a cycle leader at a local cycle club, and a blue belt in Karate.</p>
    
<h2>References</h2>
<p class="first">Available on request.</p></code>

there is nothing here that you haven’t seen before, except perhaps the ol element denoting the list as ordered, or numbered. You might notice that each li element has got a heading and a paragraph inside it — this is perfectly fine. This brings me on to my next topic — the difference between block and inline elements.

Block versus inline? What is he talking about?

There is a lot of complicated jargon I’ve omitted from this article that you don't really need to know right now, but I need to go over this before we go any further. I’ll try to be as brief and simple as I can.

Think about different sized boxes containing leaflets. You can put boxes inside other boxes, and you can put leaflets inside boxes, but you can’t put a box inside a leaflet. Also, a box takes up space, but a leaflet doesn’t take up space. Ok, several leaflets together would take up space, but bear with me here for the purposes of the analogy. In any case, you could lose a leaflet underneath a dinner plate, but you couldn’t lose a box underneath a dinner plate.

boxes and flyers to represent block and inline elements

Are you loving the analogy? Good. Relating this to the HTML:

  • The block elements are like boxes — they take up space on the page and form part of the page layout. You can put block elements inside other block elements, but you can’t put them inside inline elements. Examples of block elements are div, h1, p, table, ul and li
  • the inline elements are like leaflets. They don’t really take up space on the page or form part of the page layout, and you can put them inside block elements, but you can’t put block elements inside them. They serve to give meaning to individual bits of text inside paragraphs, rather than whole paragraphs. Examples of inline elements are a, strong and em

It might sound complicated, but it is largely common sense. Does it make sense to have a paragraph inside a single emphasised word? No. Does it make sense to have a bulleted list and a paragraph contaning some links inside a list item? Yes.

Modifying the template

At this point I’d like you to start playing with the template — change it, break it, personalise it! But above all, have some fun. Don’t be afraid to add in your own content to make your own CV, or to just delete all of the body contents and make your own web page with a totally different purpose. Simple rules to follow are:

  • When modifying the text content of an element, make sure you don’t change the tags surrounding the text, just the text
  • When adding an element, make sure it is properly opened with an opening tag (eg <p>), and closed with a closing tag (eg </p>), unless it is an empty element such as img
  • Make sure you don’t put block elements inside inline elements
  • Make sure attributes are written properly, with quote marks round the value, eg <p class="first">
  • Make sure elements are properly nested. For example, <strong><a href="http://important.com">Important link</a></strong> is fine, but <a href="http://important.com"><strong>Important link</a></strong> is not. The elements shouldn't overlap like that — the a element is opened/started, then the strong element, therefore the strong element should be closed/finished before the a element, not the other way round. This can cause errors.

Summary

I think you’ll agree by this point that HTML really isn’t that hard to write, once you get to grips with the basics. By this point in the series you should have an understanding of the way the web works, and a fairly solid knowledge of HTML fundamentals. In the next article I’ll turn your attention to CSS, the language we use to give our HTML some style.