HTML III

1

• HTML III

2

• Learning Objectives
• HTML Links
• Structuring Pages with Frames
• Introduction to Cascading Style Sheets (CSS)

3

• Links
• One of the distinguishing features of HTML
• Used to skip from one page to another.
• Call up multimedia.
• Download files
• Has 3 main parts
• Destination Specifies what happens when the link
  is clicked, e.g may open another page, play audio
  or video files, etc.
• Label Overlies the link. Could be Text, Image or
  both.
• Target Often ignored. Determines where the
  destination would be displayed. Could be a named
  window or frame, or a new window or frame.

4

• Creating a Link to another web page
• ltA HREFurl of the page TARGET_blankgtLabel
  textlt/Agt
• Destination
  Target Label
• User relative URLs for links to web pages on your
  site.
• Absolute links for external pages.
• Relative URL contents.html
• Absolute URL http//www.gold.ac.uk/public_html/jo
  hn.html
• Other types of Links
• Files such as Excel, PowerPoint, Audio, etc path
  to the file
• FTP site ltA HREFftp//ftpsiteaddress/pathgt
• Email ltA HREFmailtoemailaddressofrecipientgt
  e.g. ltA HREFmailtoj.phillips_at_gold.ac.ukgtemail
  John Phillipslt/Agt

5

• Creating Links to Sections of your page
• Can be quite useful especially with large
  documents
• Achieved by creating anchors for the section, and
  linking to it.
• ltH1gtltA HREFIntrogtIntroductionlt/Agtlt/H1gt
• ltH2gtltA HREFMain SectiongtMain Sectionlt/AgtltH2gt
• ..
• ltPgtltA NAMEIntrogtIntroductionlt/Agtlt/Pgt
• This part of the course describes how to create
  anchors..
• When a visitor clicks on the link, the page jumps
  to the anchored section referenced in the link.

6

• Frames
• Can be used for organizing a site.
• Related information can be grouped together, and
  displayed in different frames.
• You may have stationary banner displaying company
  logo in a top frame.
• Table of contents on the left side
• Main contents page occupying the rest of the
  window.
• Creating Framesets
• ltHTMLgtltHEADgtltTITLEgtFRAMESlt/TITLEgtlt/HEADgt
• ltFRAMESET ROWSa,b,cgtlt!--the letters represent
  height of the respective frames as a percentage
  or in pixels.--gt
• ltFRAME NAMEbanner SRCbanner.htmlgt
• ltFRAME NAMEmain SRCmain_page.htmlgt
• ltFRAME NAMEfooter SRCfooter.htmlgt
• lt/FRAMESETgtlt/HTMLgt

7

• The previous example splits the page into
  horizontal sections,
• You can also split the page into vertical
  sections by using the COLS attribute in the
  ltFRAMESETgt tag, e.g. ltFRAMESET COLS10,,15
• You can also create frames in rows and columns.
• ltFRAMESET
• ROWSa,b,c lt!-- representing height of the
  columns--gt
• COLSx,y,zgt lt! representing width of the
  corresponding columns--gt
• Combining (Nesting) Framesets
• Simply means enclosing one frameset in another,
  when desirable.
• Top frame may contain company banner, whilst the
  middle section is divided into divided into 3
  parts with another frameset.
• Advisable to make a sketch of your page structure
  before coding.

8

• ltFRAMESET ROWS10,gt
• ltFRAME NAMEheader SRCheader.htmlgt
• ltFRAMESET COLS20,
• ltFRAME NAMEdesc SRCdescription.htmlgt
• ltFRAME NAMEmain SRCmain_page.htmlgt
• lt/FRAMESETgt
• lt/FRAMESETgt
• Other Frame Attributes
• MARGINWIDTH
• MARGINHEIGHT
• SCROLLING YES, NO or AUTO value. Displays scroll
  bar.
• BORDERCOLOR
• FRAMEBORDER
• NORESIZE Prevents visitor from resizing the
  frame.

9

• Targeting Links to Particular Frames
• This feature enables a link to open in a named
  target frame, or possibly a new window.
• ltA HREFmain_page.html TARGETname_of_framegtMain
  Sectionlt/Agt
• A frame must have a name to be targeted
• Creating Alternatives to Frames
• Useful in cases where browser has Frames turned
  off, or obsolete browser versions.
• The alternative text is enclosed in opening and
  closing ltNOFRAMESgt.. lt/NOFRAMESgt tags.
• The ltNOFRAMESgt tag should be placed before the
  closing lt/FRAMESETgt tag.

10

• Introduction to Cascading Style Sheets
• Enables the assignment of several properties at
  once to all the elements on the page marked with
  a particular tag.
• For specifying the precise font, size, colour and
  other properties of displayed text.
• Gives all the pages of a site the same look and
  feel.
• To specify the background and colours of elements
  on the page.
• Separation of content from presentation.
• Can be used together with JavaScript to create
  dynamic effects (DHTML)
• Time saving.
• 3 main types
• Local, Internal and External

11

• Local override Internal, while Internal overrides
  External styles.
• A style is made up of a tag name (selector) and
  one or more definitions (declarations) that
  determine how elements marked with that tag
  should be displayed e.g.
• H1 font-size 12ptcolor red
• Local styles are applied to individual tags
  within the HTML document
• Internal styles are defined within the Header
  section of the same document.
• External styles are stored in a separate file
  with a .css extension and referenced in the
  document by typing
• ltLINK RELstylesheet TYPEtext/css
  HREFstyles.cssgt where styles.css is the name
  of the saved file.
• It is possible to link to an external style
  sheet, as well as define both internal and local
  styles, all in the same document.