Presentation is loading. Please wait.

Presentation is loading. Please wait.

<a href=" WRITING LINKS Click: Value of the href attribute is highlighted - Explain that this is the 'value' of the href.

Published byPrimrose Bryan Modified over 6 years ago

Similar presentations

Presentation on theme: "<a href=" WRITING LINKS Click: Value of the href attribute is highlighted - Explain that this is the 'value' of the href."— Presentation transcript:

1

2

3 <a href="http://www.imdb.com">IMDB</a>
WRITING LINKS Click: Value of the href attribute is highlighted - Explain that this is the 'value' of the href attribute Click: Clickable area is highlighted (what the user sees) <a href="

4 WRITING LINKS THE PAGE THE LINK TAKES YOU TO
Click: Value of the href attribute is highlighted - Explain that this is the 'value' of the href attribute Click: Clickable area is highlighted (what the user sees) <a href="

5 WRITING LINKS THE PAGE THE LINK TAKES YOU TO
Click: Value of the href attribute is highlighted - Explain that this is the 'value' of the href attribute Click: Clickable area is highlighted (what the user sees) <a href=" THE TEXT THE USER CLICKS ON

6 LINKING TO OTHER SITES <a href=" Empire</a>

7

8 LINKING TO OTHER PAGES ON THE SAME SITE
<a href=”index.html”>Home</a> <a href=”about.html”>About</a> <a href=”movies.html”>Movies</a> <a href=”contact.html”>Contact</a> Explain: when linking to pages in own site can use shorthand - Relative URLs These links are to pages that are all in the same folder

9

10 DIRECTORY STRUCTURE examplearts index.html movies cinema listings.html
reviews.html dvd music theater Shows files used for a fictional site (compare to Finder / Windows explorer) Home page, then sections about Movies, Music, and Theater Movies has two sections: Cinema and DVD Note: Folders often referred to as directories on server Click: Root folder - folder that everything else sits inside Click: Child folder Click: Parent folder Click: Granchild folder Click: Grandparent folder Note use of terms similar to those of a family tree

11 DIRECTORY STRUCTURE examplearts index.html movies cinema listings.html
ROOT FOLDER examplearts index.html movies cinema listings.html reviews.html dvd music theater Shows files used for a fictional site (compare to Finder / Windows explorer) Home page, then sections about Movies, Music, and Theater Movies has two sections: Cinema and DVD Note: Folders often referred to as directories on server Click: Root folder - folder that everything else sits inside Click: Child folder Click: Parent folder Click: Granchild folder Click: Grandparent folder Note use of terms similar to those of a family tree

12 DIRECTORY STRUCTURE examplearts index.html movies cinema listings.html
reviews.html dvd music theater CHILD Shows files used for a fictional site (compare to Finder / Windows explorer) Home page, then sections about Movies, Music, and Theater Movies has two sections: Cinema and DVD Note: Folders often referred to as directories on server Click: Root folder - folder that everything else sits inside Click: Child folder Click: Parent folder Click: Granchild folder Click: Grandparent folder Note use of terms similar to those of a family tree

13 DIRECTORY STRUCTURE examplearts index.html movies cinema listings.html
reviews.html dvd music theater CHILD PARENT Shows files used for a fictional site (compare to Finder / Windows explorer) Home page, then sections about Movies, Music, and Theater Movies has two sections: Cinema and DVD Note: Folders often referred to as directories on server Click: Root folder - folder that everything else sits inside Click: Child folder Click: Parent folder Click: Granchild folder Click: Grandparent folder Note use of terms similar to those of a family tree

14 DIRECTORY STRUCTURE examplearts index.html movies cinema listings.html
reviews.html dvd music theater CHILD PARENT GRANDCHILD Shows files used for a fictional site (compare to Finder / Windows explorer) Home page, then sections about Movies, Music, and Theater Movies has two sections: Cinema and DVD Note: Folders often referred to as directories on server Click: Root folder - folder that everything else sits inside Click: Child folder Click: Parent folder Click: Granchild folder Click: Grandparent folder Note use of terms similar to those of a family tree

15 DIRECTORY STRUCTURE examplearts index.html movies cinema listings.html
reviews.html dvd music theater CHILD PARENT GRANDCHILD Shows files used for a fictional site (compare to Finder / Windows explorer) Home page, then sections about Movies, Music, and Theater Movies has two sections: Cinema and DVD Note: Folders often referred to as directories on server Click: Root folder - folder that everything else sits inside Click: Child folder Click: Parent folder Click: Granchild folder Click: Grandparent folder Note use of terms similar to those of a family tree GRANDPARENT

16 RELATIVE URLS examplearts index.html movies cinema listings.html
reviews.html dvd music theater Shows the same directory structure as previous slide, but this time shows the relative URL Click: Same folder - from music home page to music reviews page Click: Child - from main home page to music listings page Click: Parent - from music listings to main home page Click: Grandchild - from main home page to DVD reviews page Click: Grandparent: from DVD reviews to main home page

17 RELATIVE URLS examplearts index.html movies cinema listings.html
reviews.html dvd music theater SAME reviews.html Shows the same directory structure as previous slide, but this time shows the relative URL Click: Same folder - from music home page to music reviews page Click: Child - from main home page to music listings page Click: Parent - from music listings to main home page Click: Grandchild - from main home page to DVD reviews page Click: Grandparent: from DVD reviews to main home page

18 RELATIVE URLS examplearts index.html movies cinema listings.html
reviews.html dvd music theater CHILD music/index.html SAME reviews.html Shows the same directory structure as previous slide, but this time shows the relative URL Click: Same folder - from music home page to music reviews page Click: Child - from main home page to music listings page Click: Parent - from music listings to main home page Click: Grandchild - from main home page to DVD reviews page Click: Grandparent: from DVD reviews to main home page

19 RELATIVE URLS examplearts index.html movies cinema listings.html
reviews.html dvd music theater PARENT ../index.html SAME reviews.html CHILD music/index.html Shows the same directory structure as previous slide, but this time shows the relative URL Click: Same folder - from music home page to music reviews page Click: Child - from main home page to music listings page Click: Parent - from music listings to main home page Click: Grandchild - from main home page to DVD reviews page Click: Grandparent: from DVD reviews to main home page

20 RELATIVE URLS examplearts index.html movies cinema listings.html
reviews.html dvd music theater GRANDCHILD movies/dvd/index.html SAME reviews.html CHILD music/index.html Shows the same directory structure as previous slide, but this time shows the relative URL Click: Same folder - from music home page to music reviews page Click: Child - from main home page to music listings page Click: Parent - from music listings to main home page Click: Grandchild - from main home page to DVD reviews page Click: Grandparent: from DVD reviews to main home page PARENT ../index.html

21 RELATIVE URLS examplearts index.html movies cinema listings.html
reviews.html dvd music theater GRANDPARENT ../../index.html SAME reviews.html CHILD music/index.html Shows the same directory structure as previous slide, but this time shows the relative URL Click: Same folder - from music home page to music reviews page Click: Child - from main home page to music listings page Click: Parent - from music listings to main home page Click: Grandchild - from main home page to DVD reviews page Click: Grandparent: from DVD reviews to main home page PARENT ../index.html GRANDCHILD movies/dvd/index.html

22 LINKS <a Jon </a> Click: highlights the mailto: before address

23 LINKS <a Jon </a> Click: highlights the mailto: before address

24

25 OPENING LINKS IN A NEW WINDOW
<a href=" target="_blank">IMDB</a> (opens in a new window) Click: highlights target="_blank" Note: tell users when link opens in a new window

26 OPENING LINKS IN A NEW WINDOW
<a href=" target="_blank">IMDB</a> (opens in a new window) Click: highlights target="_blank" Note: tell users when link opens in a new window

27

28 LINKING TO A SPECIFIC PART OF THE SAME PAGE
<h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> Explain: on a long page you can link from one part of page to another Typical use = back to top links at bottom of pages and links from content at top of page to lower part Click: Arrow indicates clicking on prologue link takes you to that part of the page (content page will scroll down) Highlighting indicates how the link relates to the element with the corresponding id attribute Click: Arrow points to clicking on Top link, page scrolls back up Highlighting shows how the link relates to the element with the corresponding id attribute Note: The value of the id attribute must be unique to that page Must start with letter or underscore (not a number)

29 LINKING TO A SPECIFIC PART OF THE SAME PAGE
<h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> <h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> Explain: on a long page you can link from one part of page to another Typical use = back to top links at bottom of pages and links from content at top of page to lower part Click: Arrow indicates clicking on prologue link takes you to that part of the page (content page will scroll down) Highlighting indicates how the link relates to the element with the corresponding id attribute Click: Arrow points to clicking on Top link, page scrolls back up Highlighting shows how the link relates to the element with the corresponding id attribute Note: The value of the id attribute must be unique to that page Must start with letter or underscore (not a number)

30 LINKING TO A SPECIFIC PART OF THE SAME PAGE
<h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> <h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> <h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> Explain: on a long page you can link from one part of page to another Typical use = back to top links at bottom of pages and links from content at top of page to lower part Click: Arrow indicates clicking on prologue link takes you to that part of the page (content page will scroll down) Highlighting indicates how the link relates to the element with the corresponding id attribute Click: Arrow points to clicking on Top link, page scrolls back up Highlighting shows how the link relates to the element with the corresponding id attribute Note: The value of the id attribute must be unique to that page Must start with letter or underscore (not a number)

31 LINKING TO A SPECIFIC PART OF THE SAME PAGE
<h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> <h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> Explain: on a long page you can link from one part of page to another Typical use = back to top links at bottom of pages and links from content at top of page to lower part Click: Arrow indicates clicking on prologue link takes you to that part of the page (content page will scroll down) Highlighting indicates how the link relates to the element with the corresponding id attribute Click: Arrow points to clicking on Top link, page scrolls back up Highlighting shows how the link relates to the element with the corresponding id attribute Note: The value of the id attribute must be unique to that page Must start with letter or underscore (not a number)

32 LINKING TO A SPECIFIC PART OF THE SAME PAGE
<h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> <h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">Top</a> Explain: on a long page you can link from one part of page to another Typical use = back to top links at bottom of pages and links from content at top of page to lower part Click: Arrow indicates clicking on prologue link takes you to that part of the page (content page will scroll down) Highlighting indicates how the link relates to the element with the corresponding id attribute Click: Arrow points to clicking on Top link, page scrolls back up Highlighting shows how the link relates to the element with the corresponding id attribute Note: The value of the id attribute must be unique to that page Must start with letter or underscore (not a number)

33 Links are created using the <a> element.
SUMMARY Links are created using the <a> element. Clicks: Load individual bullets

34 SUMMARY The <a> element uses the href attribute to indicatethe page you are linking to. Clicks: Load individual bullets

35 SUMMARY If you are linking to a page within your own site, it is best to use relative links rather than qualified URLs. Clicks: Load individual bullets

36 SUMMARY You can create links to open programs with an address in the "to" field. Clicks: Load individual bullets

37 SUMMARY You can use the id attribute to target elements within a page that can be linked to. Clicks: Load individual bullets

38

39

Download ppt "<a href=" WRITING LINKS Click: Value of the href attribute is highlighted - Explain that this is the 'value' of the href."

Similar presentations

WRITING LINKS IMDB WRITING LINKS IMDB THE PAGE THE LINK TAKES YOU TO.

WRITING LINKS IMDB WRITING LINKS IMDB THE PAGE THE LINK TAKES YOU TO.
XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.

XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.
Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.

Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.
In this lecture, you will learn: ❑ How to link between pages of your site ❑ How to link to other sites ❑ How to structure the folders on your web site.

In this lecture, you will learn: ❑ How to link between pages of your site ❑ How to link to other sites ❑ How to structure the folders on your web site.
Links and Comments.

Links and Comments.
HTML Introduction (cont.) 10/01/2009 1 Lecture 8, MAT 279, Fall 2009.

HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.
27 September. Thursday’s Current Event: Follow Up Lands End Already offers VoIP eBay to purchase Skype Connect buyers and sellers Google Offers instant.

27 September. Thursday’s Current Event: Follow Up Lands End Already offers VoIP eBay to purchase Skype Connect buyers and sellers Google Offers instant.
Web Structure Create Links Using HTML. 2 Objectives List different types of Web site structures and how to employ them Create element ids to mark specific.

Web Structure Create Links Using HTML. 2 Objectives List different types of Web site structures and how to employ them Create element ids to mark specific.
1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Path to Files Various Links Click Here :( Page Footers.

1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Path to Files Various Links Click Here :( Page Footers.
1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Sequential and Indexed-Sequential Designs Hierarchical Design Custom Design.

1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Sequential and Indexed-Sequential Designs Hierarchical Design Custom Design.
Announcement #1 1 Lecture 9. Announcement #2  Midterm exam will be on Oct. 12 (Tuesday)  12.30 pm – 1.45 pm  Exam will cover all materials till Oct.

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.
XP 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.

XP 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.
XP Tutorial 2New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.

XP Tutorial 2New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2.
CNIT 132 – Week 3 HTML (2). Working with Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down. A.

CNIT 132 – Week 3 HTML (2). Working with Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down. A.
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.

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.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.

Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
Pre-Coding Web Design – Sec 3-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.

Pre-Coding Web Design – Sec 3-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Mohammed Mohsen 2011. Links Links are what make the World Wide Web web-like one document on the Web can link to several other documents, and those.

Mohammed Mohsen Links Links are what make the World Wide Web web-like one document on the Web can link to several other documents, and those.
Tutorial #2 Creating Links. Tutorial #1 Review Basic Page (DOCTYPE, HTML, Head, Title, Body) Tags Structure( ),,,,,, Nested Tags content Tag Attributes.

Tutorial #2 Creating Links. Tutorial #1 Review Basic Page (DOCTYPE, HTML, Head, Title, Body) Tags Structure( ),,,,,, Nested Tags content Tag Attributes.
HTML (Hypertext Markup Language ). Hyperlinks Hyperlinks from text to other sites Write the link, which is visible at the screen Example: Hyperlink to.

HTML (Hypertext Markup Language ). Hyperlinks Hyperlinks from text to other sites Write the link, which is visible at the screen Example: Hyperlink to.

Similar presentations

Ads by Google