1 / 11

Mastering HTML Links, Frames, and CSS for Web Development

Learn how to create links to media, sections, and external sites, organize content with frames, and style pages with CSS. Develop a professional website structure efficiently.

alicecsmith
Download Presentation

Mastering HTML Links, Frames, and CSS for Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • <A HREF=“url of the page” TARGET=_blank>Label text</A> 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/john.html Other types of Links • Files such as Excel, PowerPoint, Audio, etc: path to the file • FTP site: <A HREF=ftp://ftpsiteaddress/path> • Email: <A HREF=mailto:emailaddressofrecipient> e.g. <A HREF=mailto:j.phillips@gold.ac.uk>email John Phillips</A>

  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. <H1><A HREF=“#Intro”>Introduction</A></H1> <H2><A HREF=“#Main Section”>Main Section</A><H2> ……………….. <P><A NAME=“Intro”>Introduction</A></P> 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 <HTML><HEAD><TITLE>FRAMES</TITLE></HEAD> <FRAMESET ROWS=“a,b,c”><!--the letters represent height of the respective frames as a percentage or in pixels.--> <FRAME NAME=“banner” SRC=“banner.html”> <FRAME NAME=“main” SRC=“main_page.html”> <FRAME NAME=“footer” SRC=“footer.html”> </FRAMESET></HTML>

  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 <FRAMESET> tag, e.g. <FRAMESET COLS=“10%,*,15%” • You can also create frames in rows and columns. <FRAMESET ROWS=“a,b,c” <!-- representing height of the columns--> COLS=“x,y,z”> <!– representing width of the corresponding columns--> 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. <FRAMESET ROWS=“10%,*”> <FRAME NAME=“header” SRC=“header.html”> <FRAMESET COLS=“20%,*” <FRAME NAME=“desc” SRC=“description.html”> <FRAME NAME=“main” SRC=“main_page.html”> </FRAMESET> </FRAMESET> 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. • <A HREF=“main_page.html” TARGET=name_of_frame>Main Section</A> • 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 <NOFRAMES>…….. </NOFRAMES> tags. • The <NOFRAMES> tag should be placed before the closing </FRAMESET> 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: 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: • <LINK REL=stylesheet TYPE=“text/css” HREF=“styles.css”> 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.

More Related