Week 3

HTML
HTML

LINKS

Tag <a>

Markup Languages
HTML Link Tag
Link to
Other sites
Between your own pages
To e-mail
<A HREF=“name”>hypertext</A>
<A HREF=“http://www.kodak.com”>Kodak</A>
<A HREF=“john/johnpage.html”>John’s Page</A>
<A HREF=“mailto:[email protected]”>John’s mail</A>
<A HREF=“file:///C:\web\john\johnpage.html”>John’s Page</A>

Markup Languages
Text Hyperlinks
Text links
• use <A HREF=“…”> to link to another HTML page
• HREF points to new page
• text between <A…> and </A> will be highlighted as a link, e.g., “click
here for syllabus” below will be highlighted

<A HREF=“http://cis519dhm.bus.umich.edu”>
click here for syllabus
</A>

Markup Languages
Linking within one document

• <p> <a href="#C4"> • See also Chapter 4.

• See also Chapter 4. </a> </p> • Chapter 1
• <p> <h2>Chapter 1</h2> • This chapter explains ba bla bla
• <p>This chapter explains ba bla bla</p> • Chapter 2
• <h2>Chapter 2</h2> <p>This chapter • This chapter explains ba bla bla
explains ba bla bla</p> • Chapter 3
• This chapter explains ba bla bla
• <h2>Chapter 3</h2> <p>This chapter
explains ba bla bla</p> • Chapter 4
• This chapter explains ba bla bla
• <a name="C4"><h2>Chapter 4</h2></a> • Chapter 5
<p>This chapter explains ba bla bla</p> • This chapter explains ba bla bla
• <h2>Chapter 5</h2> <p>This chapter
explains ba bla bla</p>

Markup Languages
Link to a mail
• <p> This is a mail link:
• This is a mail link: Send Mail
• <a href="mailto:someone@
• Note:microsoft.com?subject=Hello
Spaces between words should be replaced by %20 to ensure that the
browser%20again">
will display your text properly.
• Send Mail</a> </p>
• <p>
• <b>Note:</b> Spaces between words
should be replaced by %20 to
<b>ensure</b> that the browser will
display your text properly.
• </p>

Markup Languages
 HTML Images
<img> Defines an image
Attributes:SRC, ALT, HEIGHT, WIDTH, ALIGN,
HSPACE ,VSPACE

<map> Defines an image map

<area> Defines an area inside an image map

Markup Languages
Image File Formats
• Acceptable image formats vary by browser
• Generally acceptable formats are
• GIF
• Graphics Interchange Format
• Use for graphics
• JPG
• Joint Photographic Experts Group
• Use for photographs
• PNG
• Portable Network Graphics
• Expected to replace GIF

Markup Languages
Image File Formats (cont’d)
• Transparency
• All bitmapped graphics are rectangular by nature.
• Parts of a GIF image can be made transparent.
• Transparency in layered in flat images.
• Interlacing
• Downloading in a series of passes.
• With each pass, the image becomes clearer.
• Useful for slow Internet connections.
• Animation
• A sequence of frames.
• All frames saved as a single animated GIF file.

Markup Languages
 HTML Image Tag

• <p> An image:
• An image:
• <img src="constr4.gif"
• width="144" height="50">
• </p>

• A moving image:
• <p> A moving image:
•
• <img src="hackanm.gif"
• width="48" height="48">
• </p>

Markup Languages
 Inserting Image from Other Location

•• <p>
An image
An imagefrom
fromanother folder:
another folder:
• <img src="/images/netscape.gif"
• width="33" height="32">
• </p>

•• An image from W3Schools:

<p> An image from W3Schools:
•• <img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">
• </p>

Markup Languages
ALT Attribute & Sizing Graphics and borders
• Sometimes graphics may not be WIDTH and HEIGHT
shown. specify graphic size in
• The ALT attribute of the IMG tag pixels
specifies an alternate text display <IMG
for non-graphic browsers SRC=“MyPicture.gif”
WIDTH=150
<IMG SRC=“JoesPicture.gif” HEIGHT=200>
ALT=“[Picture of Joe and his BORDER specifies
dog.]”> width of border in pixels
<IMG
SRC=“MyPicture.gif”
BORDER=14>

Markup Languages
ALIGN Attribute & HSPACE
The attribute HSPACE
• Used to specify the provides some horizontal
relation of text to the padding around the text so that
image. the text and image do not butt
• <IMG SRC=“image” up against each other.
ALIGN=“direction”> <IMAGE SRC=“image”
• Default is bottom HSPACE=20 This is the
descriptive text>
• Attribute values: top,
Also the attributes VSPACE
middle, bottom, right, and SPACE
left

Markup Languages
HTML Back Ground
• Attribute of Body Tag
• bgcolor
• Types of Background:
• a background color and a text color that makes
the text on the page easy to read.
• <body bgcolor="#d0d0d0">

• a background color and a text color that makes

the text on the page difficult to read. 
• <body bgcolor="#ffffff" text="yellow">

Markup Languages
 Background Color / Graphics
Backgrounds can be added to each document, but are not readable on all
browsers.

Attributes of <BODY>

BGCOLOR=”code” Specify color for background of the screen

BACKGROUND=”path/file” Tiles the graphic in the file to fit the screen

<BODY BGCOLOR=”green”>
<BODY BGCOLOR=”#00FF00”>
<BODY BACKGROUND=” BrickWall.gif”>
• black is “000000” (i.e., no color)
• white is “ffffff”
Markup Languages