HTML Links CS 1150 Spring 2017.

Slides:



Advertisements
Similar presentations
WRITING LINKS IMDB WRITING LINKS IMDB THE PAGE THE LINK TAKES YOU TO.
Advertisements

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.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links
External Site Links by Awnya Boam. Links are found… …almost everywhere on the internet. They allow users to travel from one site to another.
Links and Comments.
HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.
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.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
CSI315CSI315 Building Web Sites. What is a website A website is just a bunch of web pages connected together with something called a link. In HTML there.
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.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.
Web Design (5) Navigation (1). Creating a new website called ‘Navigation’ In Windows Explorer, open the folder “CU3A Web Design Group”; and then the sub-folder.
Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.
CHAPTER 4 LINKS Creating links between pages Linking to other sites links.
WEB DESIGN UNIT 2 Unit 2 Module 2-5. WHAT HAVE YOU LEARNED?  What is the title tag do? Where does it show?  What are the tags that need to be on every.
1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.
Unit 3 Day 6 FOCS – Web Design. Journal Unit #3 Entry #4 Write the source code that would make the following display on a rendered page: Shopping List.
Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.
INTRODUCTORY Tutorial 6 Using Links on a Web Page.
Creating Links. The Anchor Element: The anchor tag can be used in three different ways: 1.External link – to link to a web page outside your own website.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
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.
Links Building a Website Lesson 5. Links There are various ways to use links on a website: Link to other sites Link to other pages on the same site .
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.
Hyperlink ● Anchor tag and its attributes ● Four Types of URL ─ ─ Absolute addressing ─ Relative addressing ─ Intrapage ● Attributes -- link, vlink,
Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.
HTML Links and navigation Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
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.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links.
4.01 How Web Pages Work.
Intro to HTML CS 1150 Spring 2017.
Introduction to HTML.
4.01 How Web Pages Work.
Objective % Select and utilize tools to design and develop websites.
Intro to HTML CS 1150 Fall 2016.
Links and Comments in HTML5
Internal and External Links
Pre-Coding Web Design – Sec 3-1
Internal and External Links
Links and Comments.
Hyperlink Anchor tag and its attributes Four Types of URL
Creating Links.
LINKS.
Objective % Select and utilize tools to design and develop websites.
HTML Images CS 1150 Spring 2017.

Web Design and Development
Inserting and Working with Links
How files are organized
CNIT 131 HTML5 – Anchor/Link.
Links and Comments.
HTML Introduction Lecture 8.
Hyperlink Anchor tag and its attributes Four Types of URL
Creating Links.
HTML Links.
Links and Comments.
Links and Comments.
HTML LINKS
4.01 How Web Pages Work.
IDT Links in HTML What you need to know….
HTML Links CS 1150 Fall 2016.
Creating Links.
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

HTML Links CS 1150 Spring 2017

HTML Links Links are the defining feature of the internet because they allow you to move from one webpage to another – enabling the very idea of surfing You will commonly come across the following types of links: Links from one website to another Links from one page to another on the same website Links from one part of a webpage to another part of the same page Links that open in a new browser window

Creating a Link in HTML Links are created using the <a> element Users can click on anything between the opening <a> tag and the closing </a> tag You specify which page you want to link to using the href attribute

<a href=“http://www.imdb.com”>IMDB</a> The text between the opening <a> tag and closing </a> tag is known as link text Where possible, your link text should explain where visitors will be taken if they click on it (rather than just saying “click here”) Below is an example link in HTML with link text IMDB and a URL of http://www.imdb.com. <a href=“http://www.imdb.com”>IMDB</a> -----------------------------opening link tag---------------------------------- closing tag

Linking to Other Sites When you link to a different website, the value of the href attribute will be the full web address for the site, which is known as the absolute URL The absolute URL is the web address you would type into a browser if you wanted to visit that specific page An absolute URL starts with the domain name for that site, and can be followed by the path to a specific page. If no page is specified, the site will display the homepage Example file: https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/linking_to_other_sit es.html

Linking to Other Pages on the Same Site When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use shorthand known as a relative URL If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file If you have different pages of a site in different folders, then you can use a slightly more complex syntax to indicate where the page is in relation to the current page Example file: https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/linking_to_the_sam e_site.html

Directory Structure The directory structure is the structure of folders on the webserver where a website is hosted The top-level folder is known as the root folder (public_html is our root folder) The main homepage of a site is placed in the root folder and is called index.html Webservers are set up to return the index.html file if no other filename is specified

More on Directory Structure Every page and every image on a website has a URL (Uniform Resource Locator). The URL is made up of the domain name followed by the path to that page or image. You can use URLs when linking to other pages or images in your own site

Relative URLs When are you are linking to a page on your own website, you do not need to specify the domain name You can use relative URLs, which are a shorthand way to tell the browser where a page is in relation to the current page If all the files on your site are in one folder, you simply use the file name for that page

Using Relative URLs Relative Link Type Example Same folder <a href=“reviews.html”>Reviews</a> Child folder <a href=“music/listings.html”>Listings</a> Grandchild folder <a href=“movies/dvd/reviews.html”>Reviews</a> Parent folder <a href=“../index.html”>Home</a> Grandparent folder <a href=“../../index.html”>Home</a>

Opening Links in a New Window If you want a link to open in a new window, you can use the target attribute on the opening <a> tag The value of this attribute should be _blank Example: <a href=“http://www.imdb.com” target=“_blank”>Internet Movie Database</a> Example file: https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/opening_lin ks_in_new_window.html

Linking to a Specific Part of the Same Page At the top of a long page, you might want to add a list of contents that links to the corresponding sections lower down Or, you might want to add a link from part way down the page back to the top of it to save users from having to scroll back to the top Example file: https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/linkin g_to_the_same_page.html

Linking to a Specific Part of Another Page To add a link to a specific part of a different page, use the same techniques as linking to the same page The href attribute will contain the address for the page, followed by the # symbol, followed by the value of the id attribute that is used on the element you are linking to Example file: https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/linkin g_to_part_of_another_page.html