35 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Attributes Most HTML tags have optional attributes (or arguments) that can be used to control

© 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan1

Attributes

• Most HTML tags have optional attributes (or arguments) that can be used to control their behaviour.+ Such attributes appear after the tag name but before the

closing > bracket.+ Each attribute consists of a name, = and a value.

• HREF="index.html"• HREF='index.html'• rows="4"

+ Attribute names are case-insensitive.+ Each tag supports different attributes.


Tag Attributes and Values

HTML ElementAttribute

sAttribute Values

What the attribute does

<H1></H1> (heading)

Through to

<H6></H6>(heading)

align= Left, center, right Alignment justifies or centers the heading. Default is left alignment

<P></P> (paragraph) align= Left, center, right Alignment is used justify or center the text

<BR> clear= Left, right Used only in conjuction with images and tables

<HR> align= Left, center, right Alignment used to justify or center horizontal rule. Default is centered

noshade [takes no value] Eliminates 3-D effect

size= n (an integer) Sets the thickness of the rule in pixels. Default size is 2

Width= n (an integer)

Or n%

Integer values set the width of the horizontal rule, % value set the width as a percentage of the browsers window. Default is 100%


Tag Attributes and Values for Fonts


sAttribute Values


<FONT></FONT> face= [the name of a preinstalled font type]

Changes the typeface

colour= [a colour name or hexadecimal colour code]

Changes the text colour. (White =FFFFFF Black =000000 )

size= n (an integer between 1 and 7) =n or –n

Changes the text size


Fontattributes.html


Lists

• There are a number of different tags used to construct lists.+ <OL> … </OL> is used to construct an ordered or numbered list.+ <UL> … </UL> is used to construct an unordered or bullet list.+ Within these tags we place the items making up the list.

• Within a list, we use:+ <LH> for the header of the list.+ <LI> to specify list items.


ten.html

<HTML> <HEAD> <TITLE> Numbers </TITLE> </HEAD> <BODY>

<OL><LH> <EM>This is a list of 5 numbers</EM>.<LI> One<LI> Two<LI> Three<LI> Four<LI> Five

</OL> </BODY></HTML>


eleven.html

<HTML><HEAD><TITLE> Numbers </TITLE></HEAD><BODY><OL TYPE="i" START="10"><LH> <EM>This is a list of 5 numbers</EM>.<LI> One<LI> Two<LI> Three<LI> Four<LI> Five</OL></BODY></HTML>

TYPE="A" Sets markers to uppercase letters.TYPE="a" Sets markers to lowercase letters.TYPE="I" Sets markers to uppercase Roman numerals.TYPE="i" Sets markers to lowercase Roman numeralsTYPE="1" Sets markers to numbers Default value.


• Bullet shapes in an unordered list can also be changed.+ Possible values are disc, circle, square – the default value is

disc

<UL> type = square</UL>

• A third type of list is a defintition list+ Definition list element is created with the tag pair <DL></DL>

• Inside the Defintion list, deflist-tem elements are marked with the tag <DT>

• In addition to the deflist-term elements, deflist-definitions elements are marked with the tag <DD>

• <DT> and <DD> work within the <DL> in pairs


Deflist.html



sAttribute Values


<UL></UL>

(Unordered List>

type= disc, circle, square

Changes the shape of the bullet. Default value is disc

<OL></OL>

(Ordered List)

type=

start= n(a positive integer)

Indicates where to start counting

<LI></LI> (List Item) type= Any of the vaues for ordered list above

Overrides any type attribute set yb relevant OL tag (ordered lists only)

type= Any of the vaues for unordered list above

Overrides any type attribute set yb relevant UL tag (unordered lists only)

value= n(positive integer)

Indicates where to start counting (applies only to ordered lists)

List Related Elements

A" Sets markers to uppercase letters."a" Sets markers to lowercase letters."I" Sets markers to uppercase Roman numerals."i" Sets markers to lowercase Roman numerals"1" Sets markers to numbers Default value.


• We can nest one list within another.

twelve.html

<HTML> <HEAD> <TITLE> Numbers </TITLE> </HEAD> <BODY>

<OL TYPE=I><LH> <EM>This is a list of 5 numbers with sub-lists</EM>.<LI> One

<OL><LI> One One<LI> One Two</OL>

<LI> Two<LI> Three

<UL><LI> Six One<LI> Six Two<LI> Six Three</UL>

<LI> Four<LI> Five</OL>

</BODY></HTML>



Controlling White Space

• Web browsers ignore white space and blank lines so special elements are needed to produce spaces and blank lines that will be preserved and displayed by a web browser.+ Single white space &nbsp:+ Single Line Break <BR> + Block quote element <blockquote> </blockquote>+ Preformat element <PRE> </PRE>


Applications of Colour• The following page elements can be changed

+ Background colour+ Text colour for the whole page+ Link colours+ Visted link colours+ Active link colours

Changing background colour+ Choose the colour carefully, take into consideration the

colour of your text and graphics• <BODY BGCOLOR = “#000000”> … </BODY>• <BODY BACKGROUND = “93098.GIF”> …. </BODY>

Changing the text colour for whole page to Black<BODY TEXT = “#FFFFFF”>


Change link colour to RED<BODY LINK = “#FF0000”>……….</BODY>

Change the visited Link Colour to Orange<BODY VLINK = “#FF6600”>………</BODY>

Change the Active Link Colour to Yellow<BODY ALINK = “#FFFF00”>…….</BODY>

In practice, all the changes would be made at once by nesting all of the attributes within the BODY tag

<BODY BGCOLOR =“#000000” TEXT=“#FFFFFF” LINK=“#FF0000” VLINK=“#FF6600” ALINK=“#FFFF00”>………….</BODY>

(You can also just type the name of the colour without having to use hex value)


<HTML>

<HEAD>

<TITLE> Contents</TITLE>

</HEAD>

<BODY bgcolor = "#000000" TEXT = "#FFFFFF"

LINK= "#FF0000" VLINK = "#00FF00"

ALINK ="#0000FF">

<H1>Networks & Internets</H1>

Example pages:

<UL>

<LI> <A HREF="one.html"> One </A>

<LI> <A HREF="two.html"> Two </A>

<LI> <A HREF="three.html"> Three </A>

<LI> <A HREF="four.html"> Four </A>

<LI> <A HREF="five.html"> Five </A>

<LI> <A HREF="six.html"> Six </A>

<LI> <A HREF="seven.html"> Seven</A>

</UL>

</BODY>

</HTML>


nin

e.h

tml

<HTML>

<HEAD>

<TITLE> Attributes</TITLE>

</HEAD>

<BODY BACKGROUND="93098.gif" TEXT="#00ff00">

This page has a background and the colour

of the text has been set to match(?) the background.

<HR>

<img align="left" height="200" width="120" src="box.gif">

<img align="right" src="box.gif">

</BODY>

</HTML>


Adding Background Patterns

<BODY BACKGROUND="93098.gif">

• Browsers display backgrounds by filling the available space in the browsers window with a tiling background+ Image boundaries make tiling apparent+ Photographs often produce a “Pillow” effect (colour on opposite

edges don’t match) • Photograph images used for background should be uniform in

colour

• Images for background can be obtained with digital camera’s, image libraries on the web, by scanning images, or by creating your own images using a drawing program (psp)+ Web friendly formats for images on the web are

• GIF, JPEG, PNG (portable network Graphics)– not recommended are BMP, TIFF or PICT files (files

usually to large, and not all browsers can display them)• Images should be restricted to no larger than 30-40KB


Return to Image attributes

Aligning ImagesInline images need to be aligned with text blocks to achieve a good combination of text and graphics. This effect is achieved by the use of the ALIGN Attribute inside the IMG tag.

+ Any text near the image will automatically flow around the image• ALIGN values LEFT, RIGHT, CENTER• Vertical ALIGN values BOTTOM, TOP and MIDDLE

+ Additional control over text behaviour around an image using CLEAR attribute inside the BR tag

• CLEAR = RIGHT, CLEAR = LEFT OR CLEAR = CENTER

Images used as LinksBy including the image tag <IMG> tag within the <A HREF></A> tags, when an image is used as a link it usually has a blue border around it,<A HREF=one.html> <IMG BORDER = 0 SRC = “box.gif” ALT

= “grey box”> </A>


Scaling Images+ Changing it Height and Width attributes (increase or decrease

size of image on screen)+ Preserve Aspect Ration

• Scaling to large can result in Pixel effects (high resolution images better for scaling up)

• Scaling to small can result loss of image quality– Shrinking an image down does not reduce its bandwith

requirement. To reduce download times, you must compress the images

Uses of ALT attributeThe ALT attribute allows you to specify a line of text that will be displayed by browsers that aren’t configured to display graphics

+ Blind people use text-to-voice speech generation to describe web pages

+ ALT attribute will be displayed is there is a problem with your image

<IMG ALIGN ="left" HEIGHT="200" WIDTH="120" SRC="box.gif“ ALT =“picture of a box”>


BACKGROUND & IMAGE ELEMENTS


sAttribute Values


<BODY> </BODY> background= [a file name] Sets the background pattern for the page

bgcolor= [a colour name or hex colour code]

Sets the background colour for the page

<IMG> align= Left, right Alignment is used to justify the image against one side of the page with text flowing down alongside it.

alt= [a string of text]

Alt used by browsers that cannot display the image

height n(an integer) Sets the height of the image in pixels

width n (an integer) sets the height of the image in pixels

src [a filename] Tells the browser which image to display

Documents

35 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Attributes Most HTML tags have optional attributes (or arguments) that can be used to control