skill area 215.2

`

Skill Area 215.2

Basic HTML

Lecture Overview• HTML Body Elements• Linking techniques• HyperText references• Linking images• Linking to locations on a page• Linking to a fragment on another

page• Linking to mail software• Ordering links to a new window• Image maps• List• Table

HTML Body Element• The <body> element encloses

all page contents.

• Example web page contents:– Text– List– Image– Etc.

HTML Body Element - TEXT

There are two categories of text element:

• Block elements– For marking up large blocks of content

such as headings and paragraphs

• Inline elements– For marking up individual words or

phrases or to emphasize words in a sentence.


Headings

• There are six different levels of heading:– <h1>– <h2>– <h3>– <h4>– <h5>– <h6>

<h1> is the top level heading content, e.g. site or page title

<h6> is the for the least important heading, e.g. a sub-section

<h1>This is heading 1</h1>


Paragraph

• The <p> element defines a paragraph.

• When a browser displays a paragraph, it adds a new line before the paragraph.

• Paragraphs should not be nested inside other paragraphs.

<p>The purpose of this page is to demonstrate a basic XHTML document.</p>


Inline element

• Inline elements are used to markup small portions of text.

• Inline elements must always be nested inside a block level element.

<p>The purpose of this page is to demonstrate a basic <b>XHTML</b> document.</p>


Styling your text

• HTML used to feature many ‘physical style’ tags

• Tags such as <font> can be join with several attributes to specify the colour, typeface and size of text.

<font face="verdana" size="6" color="red">This is so red</font>

HTML Body Element - IMAGE

• An image can be specified using <img> as shown below.

src is use to specify the location of the imagewidth is use to specify the width of the

image height is use to specify the height of the

image alt is use to specify alternative text in case

the image is corrupted.

** Picture should be saved in similar directory with HTML document

<img src=“Koala.jpg" width="400" height="523" alt=“Koala"/>

Linking Techniques• Links on a website can be created

using an attribute called a HyperText reference (href) which is applied to an anchor element <a>.

• For example:

Linking Techniques

• Two ways of linking: Text based & Image based.

Text based

Linking Techniques

Image based

HyperText References• HyperText references provides the path of

the link for the browser to follow.– The path can be:

• Linking to a page within the site• Linking to a page outside of the site

– The link can be:• (X)HTML documents• Images• Documents• Multimedia elements

HyperText References• Linking to a page within the site.

– When linking to a page within your site server, relative URLs are used.

– For example if linking to page2.html of your site just use the pathname:

• Linking to a page outside of the site.– When linking to pages or sites external to your

site, server absolute URLs are used– For example, when linking to www.w3c.org

include the full protocol and path to the page:

HyperText References• Some rules when linking to pages within the site:

If the (X)HTML page is within the same directory, use:

If the (X)HTML page is within a lower directory, use:


If the (X)HTML page is within an even lower directory, use:

If the (X)HTML page is within a higher directory, use the Unix pathname convention“../”


If the (X)HTML page is within an even higher directory, use:

Do not use backslashes - instead use forward slashes “/” for web programmingto separate directory and file components of a path

Linking Images• Linking images also has several rules:

If you are in page2.html as shown in structure below and would like to use picture.gif, use:

Linking Images• Linking images also has several rules:

If you are in page2.html as shown in structure below and would like to use picture.gif:

Linking to Locations on A Page• Known as linking to a

document fragment.• Allows you to link to specific

points on a page.• Clicking on a subject in the

contents at the top of the page allows the user to be directed to the desired heading further down the page.

Linking to Locations on A Page• To do linking to locations on a page, two features

are needed: Name the destination using the id attribute Link to the destination using the octothorpe symbol

(#)

The id attribute• The actual headings in the body of the page need

to be marked with the id attribute. This uniquely identifies an element within the contents for the browser to find.

• For example, in the main body of text, Heading 1 would read:

Linking to Locations on A PageThe octothorpe symbol (#)• Each heading is linked to the corresponding text

by including the # value in the href attribute.• The destination is given a name, in this case

“hereisH1” for the first heading:

Linking to A Fragment on Another Page• Add the fragment name to the end of the page

URL in the href link.• For example if the headings were all contained

within “page4.html”, a page in the same directory, the link would read:

Linking to Mail Software• Use the mailto protocol.• This allows users to send emails to the

specified address from client-side email software.

• For example, linking to an email address [email protected] can be write as the following:

Opening Links in A New Window

• Use the target attribute in the anchor <a> element.

• This will tell the browser in which window the linked content should be displayed

• For example:

• This will open all links with this target in a window called “display1”

Image Maps

• An imagemap is a defined region of an image that is given a link.

• For a client-side imagemap, the browser is required to match the location of the user’s mouse to the coded coordinates of the linked area.

Image Maps• To produce an imagemap you will need:

– An image file within an <img> element

– A usemap attribute within the <img> element that defines the map in use

– A <map> element that contains the definitions of each of the required <area> elements to be applied to the image

Image Maps• For example, an image split into 2

coloured regions that link to 2 separate pages:

The “usemap” attribute tells the browser to use the “2pages” map with the image.

Image MapsShape Values• In this example the shape values chosen are a

circle and square.• The values are based on the coords.

HTML Elements - LIST

• List of items can be specify using <ul>, <ol> and <li>.– The <ul> tags specify an unordered (bullet pointed) list. – The <ol> tags specify an ordered list. – The <li> elements define each item in the list.

<ul> <li>Triangle</li> <li>Quadrilateral</li> <li>Pentagon</li> <li>Hexagon</li></ul>

<ol> <li>Triangle</li> <li>Quadrilateral</li> <li>Pentagon</li> <li>Hexagon</li></ol>

HTML – Table’s Structure• In (X)HTML the structure of the same table

is:

• Tables are constructed from cells• Cells contain the content of the table• A cell can contain any content, from

graphics to multimedia content to even other tables

HTML – TABLE – Element Definition

• <table> is a block level element that always starts on a new line.

• (X)HTML tables are “row-centric” as there are no column elements.

• The number of cells in each row determines the number of columns.


• The (X)HTML elements would appear like this:

• If the <tr> elements don’t match up, the browser will not display the table correctly


• Shown left is the (X)HTML source for this table as it would be written within the main body of the page.

• The convention is to stack the <td> elements to make them easier to locate in the code.

HTML – TABLE – Columns & Rows• Column spans are generated with the

colspan attribute within the <td> or <th> elements.

• These resize a cell to the right to make it span over the preceding columns.

• For example:

HTML – TABLE – Columns & Rows• (X)HTML for merging columns:

HTML – TABLE – Columns & Rows• Row spans are similar to column

spans but merge rows instead.• For example:

HTML – TABLE – Columns & Rows• (X)HTML for merging row:

HTML – TABLE – Cell Padding

• Cell Padding is the amount of space between the cell content and the edge of the cell containing it.

• The default value for cell padding is 1 pixel

HTML – TABLE – Cell Padding

• The cellpadding attribute can only be applied to the <table> element. This means that all cells within the table are affected by it.

• The value of cellpadding can be defined. For example:

• If cell by cell values are required, CSS can be used to fine tune the padding.

HTML – TABLE – Cell Spacing

• Cell Spacing is the amount of space between the cells.

• The browser default is 2 pixels.• To change this value, use the cellspacing

attribute in the <table> element:

HTML – TABLE – Caption

• To give the table a brief title or description, use the <caption> element.

• The caption is displayed above the table by default.

• The caption must be the first thing in the <table> element.

HTML – TABLE – Caption

ReferencesRobbins, J.N. (2007) Learning Web Design – A Beginners Guide to (X)HTML, Style Sheets, and Web Graphics. 2nd edition. Galatea Training Services Ltd.. Singapore