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

Slides:



Advertisements
Similar presentations
Farhan Nisar University of Peshawar
Advertisements

The Web Wizards Guide to HTML Chapter Four All About Hyperlinks.
Creating Frames. Frames allow you to view more than one Web page at a time. You can split the browser window horizontally and vertically. You can also.
Website Construction Features. Frames Websites can be created with or without the use of frames. If you choose to use frames: Frames pages are used to.
Introduction to HTML & CSS
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.
16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.
XP Adding Hypertext Links to a Web Page. XP Objectives Create hypertext links between elements within a Web page Create hypertext links between Web pages.
© 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details.
CIS101 Introduction to Computing HTML Project Two.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
COS 125 DAY 16. Agenda Second Capstone Progress Report Due March 23 (next class ) Assignment #4 assigned –Due Tuesday March 23 Exam #3 will March 26 –Castro.
CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.
Announcement #1 1 Lecture 9. Announcement #2  Midterm exam will be on Oct. 12 (Tuesday)  pm – 1.45 pm  Exam will cover all materials till Oct.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
Link and Table in HTML. Statistics HTML review The two faces of a HTML file In a notepad program. In a internet browser program. The function of HTML.
1 Advanced Frame Options Using NORESIZE  By default, users may resize frames unless you specify the NORESIZE attribute in the tag  Examples:
HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:
HTML Links and Anchors.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
FRAMES. With frames, we can display more than one HTML document in the same browser window. Each HTML document is called the same browser window. Each.
Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Web Technologies Website Development Trade & Industrial Education
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
CHAPTER 3 USING HYPERLINKS TO CONNECT CONTENT. LEARNING OBJECTIVES How to use the and anchor tag pair to create a text-based hyperlink. How to use the.
Internet Applications Development Lecture 5 L. Obead Alhadreti.
Website Development with Dreamweaver
Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.
The Web Wizard’s Guide to HTML Chapter Seven Frames.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 6: Links.
1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
CSCE 102 – Chapter 6 (Web Design and Layout) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.
1 HTML Frames
The Web Wizard’s Guide to HTML Chapter Seven Frames.
Using Frames in a Website GMU November 12-13, 2004.
CO1552 – Web Application Development Linking Pages - The Basis of the Web.
HTML: Tables & Frames Internet Technology.
XHTML Hyperlinks. Creating Links to Other Web Pages A link, or hyperlink, is a specially formatted Web page object that the user can click to open a different.
XP 1 HTML Tutorial 2: Developing a Basic Web Site.
1 HTML Frames
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Chapter 6 Links. 3 Parts of Links 1. Destination: defines what happens when a user clicks the link. 2. Label: this is the text (or possibly an image)
Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.
HTML Links HTML uses a hyperlink to another document on the Web.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
REEM ALMOTIRI Information Technology Department Majmaah University.
Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.
1 3/28/05CS120 The Information Era CS120 The Information Era Chapter 4 – More HTML Specifics TOPICS: Frames.
HTML Lab4 Ins.Samia alblwi. O UTLINE : 1-Links 2-Frame.
LINKING WEBPAGES USING HTML HYPERLINKS. Hyperlinks are text strings or images on a webpage which when clicked on, links to another section in the same.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.
Chapter 4 Frames and Cascading Style Sheets. Frames Frames divide a browser window into two or more separate pieces or panes, with each pane containing.
WEB DESIGN Presentated By Amit Kapri Contact No
Hyperlinks Links for Other Pages. Hyperlink (aka Link) Text (or image) user can click Takes user to different location In general, location can be: On.
Web Basics: HTML/CSS/JavaScript What are they?
Objective % Select and utilize tools to design and develop websites.
LINKS.
Objective % Select and utilize tools to design and develop websites.
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

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.