HTML Graphics 5 Adding HyperText Links to a Web Page.

Slides:

Advertisements

Similar presentations

3.02D HTML Overview 3.02 Develop webpages.

Advertisements

HTML Basics 1450 Technology Seminar Copyright 2003, Matthew Hottell.

Internet Programming Practicum Credits : 4 Information System Study Program 1Internet Programming Practicum Lecturers : Kurniawan, S.Kom., M.M. Module.

Tutorial 1: Developing a Basic Web site

External Site Links by Awnya Boam. Links are found… …almost everywhere on the internet. They allow users to travel from one site to another.

New Perspectives on Creating Web Pages with HTML

LIST- HYPERLINK- IMAGES

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.

Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.

Lecture Navigation. What is Navigation? Hypertext – creates links Process of linking from a page to: –Another page in the same website –Another page on.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.

1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Path to Files Various Links Click Here :( Page Footers.

Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,

HTML Lesson 1 TBE 540 Farah Fisher. Prerequisites Before beginning this lesson, the student must be able to… Access web pages and navigate the web Access.

Basic HTML Workshop LIS Web Team Fall What is HTML? Stands for Hyper Text Markup Language Computer language used to create web pages HTML file =

 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.

Basics of HTML.

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.

HTML Links and Anchors.

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.

Review: How do you change the border color of an image?

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

Kevin Murphy Lists, Links and Anchors Masters Project CS 490.

Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.

Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.

XP 1 New Perspectives on Creating Web Pages with HTML Adding Hypertext Links to a Web Page.

All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are saved as Text Only files so virtually any computer can.

Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)

XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 2 1 New Perspectives on Creating Web Pages With HTML Tutorial 2: Adding Hypertext Links to.

HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain,

Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.

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.

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.

Tutorial 2 Developing a Web Site. XP Objectives Learn how to storyboard various Web site structures Create links among documents in a Web site Understand.

Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.

HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

Web Design (8) Images (2). My Holiday Photos An exercise in adding and linking images. Create a new website folder calling it ‘My Holiday Photos’. In.

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.

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)

Lesson 6 Links. Creating Folders  For every web site/page, you need to create a separate folder  The computer cannot find links if they are not stored.

IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation.

Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.

Chapter 5 BIE2313 | Web design. ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of.

Click on CIS120/17 to go to website for course. The week of will tell you what is planned for the week and what has been assigned.

Creating Links Links Link- brings user to a different webpage tag to link text or image on your web page to another page on the internet. tag must include.

EXTERNAL STYLESHEETS AND MORE HTML STYLING HTML and CSS part 2.

Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.

ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.

Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.

Web Site Design Unit 11.3A: Web programming. Tags and Elements O h1 O p O h6 O li O Ol O Ul O Strong O Bold O Emphasis O Sub O Sup O How many standard.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

Internal and External Links

3.00cs HTML Overview 3.00cs Develop webpages.

WEBSITE DESIGN Chp 1

Creating a Web Page Using HTML

3.02D HTML Overview 3.02 Develop webpages.

Basic HTML and Embed Codes

Intro to Web Development Links

Lesson 4: Hyperlinks.

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

Basic HTML Workshop.

3.02D HTML Overview 3.02 Develop webpages.

4.02A HTML Overview 4.02 Develop web pages using various layouts and technologies. (Note to instructor: HTML tags are in red only to differentiate from.

Presentation transcript:

HTML Graphics 5 Adding HyperText Links to a Web Page

Objectives Create Hypertext links between elements within a document. Create Hypertext links between one document and another. Create hypertext links to pages on the Internet.

Fred’s Personal Web Page About Me, My Quotes, My Poem, About Me Hi. I am Fred. I am a student at LACES. I like to fly paper airplanes and watch cheerleaders…

Links INSIDE a web Page Start with the headings About Me, My Quotes, My Poem, Find and Mark the heading for each section with an Tag. About Me Hi. I amFred. I am a student at L A C E S. I like to fly paper airplanes and …

The Anchor Tag The tag creates an ANCHOR Text that is specifically marked so you can LINK to it from other points in the document.

Anchor Tags You assign each anchor its own anchor NAME using the NAME property. About Me Hi. I amFred. I am a student at LACES. I like to fly paper airplanes and watch cheerleaders … The Text About Me becomes an anchor named “ME”…a place to link TO Later you create a link from the beginning to this anchor.

An anchor doesn’t have to be just TEXT! Link to a photo or inline image. You can create a link to the photo from other points in the document by using the word “PHOTO”

Creating Anchors Locate the text or Graphics Before the TEXT or Graphic, place the tag where Anchor_Name is the name of YOUR anchor After the text or graphic, place a to turn off the anchor.

Creating Links to After you ANCHOR text that will be the destination for your links, you create the Links themselves. Fred’s Personal Web Page About Me, My Quotes, My Poem,

To Create a Link to an Anchor Use the same tag Instead of NAME, use HREF About Me, HREF stands for HyperText Reference, but who cares??? Links to the About Me place

Link to _Tags Tags that create links to. About Me,

Links from images To turn an inline image into a hypertext link, Tags that create links are called LINK TAGS

Linking to Text within a document Mark the destination with an anchor Locate the text or Graphic you want to designate as a link Before the text or graphic, place the tag where Anchor_Name is the name of the anchor. Close the link with

Problems ? ? ? Sometimes a link does NOT work. HREF is CASE SENSITIVE “ME” “Me” and “me” are all evaluated differently.

More Problems?? Each anchor name needs to be a unique name within a document. About Me More About Me Still More About Me

TEST your Links Click each link. You should jump to the right place. If NOT, check your code.

Review that… What is the HTML code for marking My Quotes with the anchor name “QUOTES”? <A NAME=“QUOTES”>My Quotes</A>

Review Stuff What is the HTML code for linking the text Favorite Quotes to an anchor with the name QUOTES? Favorite Quotes

Review Stuff What is wrong with this statement? For More Information When you add an anchor tag to a large section of text, place the anchor within the heading tags For More Information

Review stuff What is the HTML code for marking an inline image, Photo.jpg with the anchor name “PHOTO”?

Review Stuff What is the HTML code for linking the inline image, Button.jpg, to an anchor with the name “LINKS”?

More Review stuff TRUE or FALSE?? Anchor Names are case sensitive! T R U E “PHOTO”, “Photo” and “photo” are all different