CI435
LAB TUTORIAL WEEK 3

More HTML markup

This tutorial assumes that you have already completed the induction lab, to check that you have access to the correct tools and web space. Refer back to the induction lab (and make notes) if you can't remember how to work with Brighton Domains, either working directly online or working offline and manually uploading files.

In week 2 you started to create your Learning Journal for real and learned the HTML markup for: dates, lists, anchors for navigation within the page, images and captions, email links. This week you will learn some more HTML markup in order to make your page rich in different elements. This will give you numerous 'hooks' for styling when you move on to learning Cascading Stylesheets (CSS) next week in lab tutorial 4.

1. More lists - nested and definition lists
2. Add a table to your learning journal
3. Quoting text
4. Make an image into a link

Whenever you make any changes to your web pages remember to save them and preview them in a browser (Chrome or Firefox) to see how they will display. Check your web page frequently using the W3C Markup Validation Service.

STEP 1: More lists - nested and definition lists

In lab tutorial 2 you learned how to add a list to the learning journal using the tags <ol> (ordered list), <ul> (unordered list) and <li> (list item).

<ol> and <ul> are block elements that must contain only <li> elements; <li> elements can contain other elements such as <strong> and <em>. It's also possible to create a more intricate list by nesting a list within a list, as in this example -

<ol>
    <li>Week 1
  	<ul>
    		<li>Set up site folder</li>
   	    	<li>Create index.html</li>
    		<li>Create guide.html</li>
    		<li>Link files in a lists for navigation</li>
	</ul>
    </li>
    <li>Week 2
  	<ul>
    		<li>Add posts and date</li>
    		<li>Add named anchors</li>
  	</ul>
   </li>
</ol>

Try copying and pasting the code into your learning journal to see what it looks like.

A third type of list is the description list, marked up as <dl>. This might be used for a glossary of terms <dt> and their descriptions <dd>, as in this example -

<dl>
  <dt><strong>HTML</strong></dt>
    <dd>Hyper-text markup language - markup language used to structure content</dd>
  <dt><strong>CSS</strong></dt>
    <dd>Cascading stylesheets - used to define presentation of HTML elements</dd>
  <dt><strong>JavaScript</strong></dt>
    <dd>Scripting language for adding interactive behaviour to web pages</dd>
</dl>

Copy and paste the description list code into the page to see how the markup works. The <dl> tag groups the 'description list' elements together; the <dt> tag marks up the 'term'; the <dd> tag marks up the 'description' or value. See MDN for more information - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl.

Step 2: Add a table to your learning journal

Tables have got a bad name in web design through being used for the layout of web pages for sometime after the early days when there was no alternative i.e. CSS. Using table markup for layout can rapidly produce a complex spaghetti of tags, which is hard to debug and change easily. The table tags should only be used to structure tabular data and, when correctly used, can be very useful. For example, you might want to put your timetable in your learning journal - a good example of a feature where information does require structuring in a table of rows and columns. Later in the module we will consider the issue of how to make responsive tables that display acceptably on small width screens as well as wide screens.

When creating a table there are four main tags to use -

• <table> - all the table elements are nested within the <table> tags
• <tr> - table row
• <th> - table heading - for the column headings in the top row of the table
• <td> - table data - for the cells of the table

At its simplest table markup would look like this -

<table border="1">
  <tr>
    <th>Day/time</th>
  </tr>
</table>

Paste this into your web page and review in the browser: all that you will see is the content in a single cell of a table, with the text in bold because it has been marked up with the <th> tag for a column heading. The border attribute is presentational and as a rule should be defined in CSS rather than HTML: the W3C validator will warn you that it is incorrect to specify the border presentation in HTML when you validate the page. I have put it in the HTML here so that the borders of the table can be seen, making the table much easier to work on. Once you have attached a stylesheet to the Learning Journal page (next week) you can delete the border attribute and style the table border using CSS.

Creating a larger table, such as a timetable, is simply a matter of marking up the content of the cells with the <td> tag and nesting them within table rows - the <tr> tags. Preview the table in the browser and validate your code as you go to get rid of any errors. The following code will start you off -

<table border="1">
  <tr>
    <th>Day/time</th>
    <th>Monday</th>
    <th>Tuesday</th>
  </tr>
  <tr>
    <td>9-10am</td>
    <td></td>
    <td>CI435 lecture</td>
  </tr>
  <tr>
    <td>10-11am</td>
    <td>CI401 lecture</td>
    <td>CI435 lab </td>
  </tr>
</table>

If you learn one thing from making a table it should be that writing table markup is slow, tedious and it's easy to make mistakes - so it's a good thing that we no longer need to use tables for layout!

Step 3: Quoting text

As you are writing a journal about what you are learning on the module, you might need to quote something you have read in a book, or on the web, and provide a citation for the source. Here's how to mark this up in HTML, noting that text within a blockquote should always be marked up with another block element tag - usually a paragraph <p> -

<p>The W3C defines HTML and CSS as follows:</p>

<blockquote>

<p>HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages...<p>

<footer>

<cite>
<a href="http://www.w3.org/standards/webdesign/htmlcss">W3C standards for web design</a>
</cite>

</footer>

</blockquote>

<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page.</p>

This is how the quote will be displayed on the web page -

For more information about when and why to use the citation element <cite> see this web page - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite.

Go to top of page

Step 4: Make an image into a link

Last week you learned how to put an image on your web page. If you can't remember how to do this go back and revise lab tutorial 2 / step 4. An image can be made into a link by nesting the <img> tag inside an <a> tag with the destination of the link -

<p>

<a href="http://www.w3.org/html/logo/">

<img src="HTML5logo.png" alt="HTML5 logo"></a>

The W3C has made an HTML5 logo that you can add to your web page. The HTML5 logo is licensed under Creative Commons Attribution 3.0 — so it is free to use.
</p>

Note how this has been done -

• Everything has been nested inside <p> tags: this is so the text will wrap around the image, rather than being above or below it.
• The alt attribute has been used to provide alternative text for any users who are unable to view images in their browsers.

Have a go at doing this yourself. To find out about the terms of the Creative Commons license go to this link - http://creativecommons.org/licenses/by/3.0/

Finally - validate your HTML!

Go to the W3C website at http://validator.w3.org/ and paste your website's URL into the Address text box, as shown in lab tutorial 1. The service will tell you if there are any problems in your web pages.

If you have not had time to complete the tutorial please carry on and finish it in your own time. This is what my example learning journal now looks like. If you have any questions email Jennie Harding.