CTEC1414 Lecture 20

CTEC1414Lecture 20XHTML and CSSLinks, Images, Tables and Forms Bharti Patel

1phones off (please)hyperlinksWe can create links from one page toanother page on same siteusing a Relative address URL

another page on another siteusing an Absolute address URL

a named point within a pageSame page (relative with a name)Another page (probably on same site) (relative)hyperlinksTo another page on same sitee.g. from startrek.html to no_fuses.htmlRelative address URL as both are in same place

No Fusesthis is the page that will be displayed when the link is clickedhyperlinksTo another page on another sitee.g. from startrek.html to an external siteUse an Absolute address URL to give full directions

this is an absolute urlthis is the page that will be displayed when the link is clicked Official BBC websitehyperlinks statesHyperlinks may in one of 4 statesa link that has not been visiteda visited link a link being hovered overan active linkblue and purple are the default colours

styling hyperlinksIf you change the colours on your page the default colours may not work wellChanging link styles requires pseudo-classes note the colon (:)a:link a:visited a:hovera:activeUse this ordering

the order isimportantNote 1: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!Note 2: a:active MUST come after a:hover in the CSS definition in order to be effective!!hyperlink style examplesChange colorsa:link {color: #ff0000; background-color:transparent}a:visited {color: #0000ff; background-color:transparent}a:hover {color: #ffcc00; background-color:transparent}

Change font-sizea:link {color: #ff0000; background-color:transparent}a:visited {color: #0000ff; background-color:transparent}a:hover {font-size: 150%}

Adding ImagesIssuesColour depth (number of colours)File size compressedLoss of detail due to compressionDownload speed file sizeApplicationsAs contentAs backgroundEnhancing styleseffects

Adding ImagesImage formatsGIF Graphical Interchange FormatJPG (JEPEG) Joint Photographic Expert groupPNG Portable Network GraphicsBMP BitMaP -do not use files are too largeTIFF Tagged Image File Format

Using Imagesas page content - elementas a backgroundas a replacement for a list bulletas a heading (to replace text)as a hyperlink