One can't complain, I have many friends, someone spoke to me only      yesterday!
    


  week1 | week2 | week3 | week4 | week5 | week6 | week7 | week8 | week9 | week10 |week11 | week12

2nd October 2006

Week 2 Practical

The code you need to centre an images is;

<p ALIGN=CENTER> <IMG SRC = "imagename.gif" ALT="[HOTLIST]"> </p>

To set a specific font use the following text:

<p> <font size="2" face="Verdana"> This is a paragraph. </font> </p>

Change the 'font size' to suit yourself and enter the font style you want between the inverted commas. In this case all text in the area between the tags will be Verdana, font size 2.

*******************************************************

This week you are going to upload your work onto the www

Remember we talked about organising files and folders
before you start? ...... just a quick reminder >>>>>

By now you should be thinking about what you want to include in your web pages. The 'blog' mentioned on the assignment sheet should contain the date (as a heading) and a brief description of how you would like these pages to look, you may do this using a storyboard or by just using bullet points as well as the narrative.

     Recap - Basic HTML Tags

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<b> Defines bold text
<i> Defines italic text

Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).

To display a less than sign in an HTML document we must write: &lt; or &#60;

The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

Note that the entities are case sensitive.

Non-breaking Space

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.

The Most Common Character Entities:

non-breaking space &nbsp;
< less than &lt;
> greater than &gt;
& ampersand &amp;
" quotation mark &quot;

Links

HTML uses a hyperlink to link to another document on the Web.

Examples

Create hyperlinks
This example demonstrates how to create links in an HTML document.

An image as a link
This example demonstrates how to use an image as a link.

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This anchor defines a link to my web site that looks like this:

<a href="http://www.ics.heacademy.ac.uk/karen/</a>

More Examples

Open a link in a new browser window
This example demonstrates how to link to another page by opening a new window, so that the visitor does not have to leave your Web site.

Link to a location on the same page
This example demonstrates how to use a link to jump to another part of a document.

Break out of a frame
This example demonstrates how to break out of a frame, if your site is locked in a frame.

Create a mailto link
This example demonstrates how to link to a mail message (will only work if you have mail installed).

Tables

Examples

Tables
This example demonstrates how to create tables in an HTML document.

Table borders
This example demonstrates different table borders.

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

More Examples

Table with no border
This example demonstrates a table with no borders.

Headings in a table
This example demonstrates how to display table headers.

Empty cells
This example demonstrates how to use "&nbsp;" to handle cells that have no content.

Table with a caption
This example demonstrates a table with a caption.

Table cells that span more than one row/column
This example demonstrates how to define table cells that span more than one row or one column.

Tags inside a table
This example demonstrates how to display elements inside other elements.

Cell padding
This example demonstrates how to use cellpadding to create more white space between the cell content and its borders.

Cell spacing
This example demonstrates how to use cellspacing to increase the distance between the cells.

Add a background color or a background image to a table
This example demonstrates how to add a background to a table.

Add a background color or a background image to a table cell
This example demonstrates how to add a background to one or more table cells.

Align the content in a table cell
This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking" table.