HTML III

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

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.

Creating a Link to another web page Label text 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: Other types of Links Files such as Excel, PowerPoint, Audio, etc: path to the file FTP site: e.g. John Phillips

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. Introduction Main Section ……………….. Introduction 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.

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 FRAMES

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 tag, e.g. <FRAMESET COLS=10%,*,15% You can also create frames in rows and columns. <FRAMESET ROWS=a,b,c COLS=x,y,z> 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.

<FRAMESET COLS=20%,* Other Frame Attributes MARGINWIDTH MARGINHEIGHT SCROLLING: YES, NO or AUTO value. Displays scroll bar. BORDERCOLOR FRAMEBORDER NORESIZE: Prevents visitor from resizing the frame.

Targeting Links to Particular Frames This feature enables a link to open in a named target frame, or possibly a new window. Main Section 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 …….. tags. The tag should be placed before the closing tag.

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

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: 12pt;color: 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: 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.