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

Slides:

Advertisements

Similar presentations

Web Development & Design Foundations with XHTML

Advertisements

Chapter 2 HTML Basics Key Concepts

XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.

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.

Relative and Absolute Relative Absolute.  In web-page design, a hyperlink (or link) is a reference to a document that the reader can directly follow,

Links and Comments.

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

Create internal and external links Create internal links to named anchors Insert Flash Text Create, modify, and copy navigation bar Manage Web site links.

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.

CIS101 Introduction to Computing HTML Project Two.

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.

Lecture 13. A Very Brief Introduction to HTML and XHTML, part II Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell.

FIRST COURSE Creating Web Pages with Microsoft Office 2007.

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

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.

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

HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.

Should have seen something like this last week What does do? stands for table row and starts a new row in the table.

Informatics Computer School CS114 Web Publishing HTML Lesson 2.

Adding Hyperlinks To a Web Page. Hyperlink and Its Add-Ons Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is.

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.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 4: Creating Hyperlinks Kelly L.

Internet Applications Development Lecture 5 L. Obead Alhadreti.

Unit 1 — HTML BASICS Lesson 2 — HTML Organization Techniques.

 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.

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.

Web software. Two types of web software Browser software – used to search for and view websites. Web development software – used to create webpages/websites.

Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.

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.

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.

XP 1 HTML Tutorial 2: Developing a Basic Web Site.

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 (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.

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.

Planning and Designing a Website Index Page Use it as a way to introduce yourself, and describe your website. Use it as a way to introduce yourself,

HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.

REEM ALMOTIRI Information Technology Department Majmaah University.

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.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.

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.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 2 Creating Links.

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.

HTML Links CS 1150 Spring 2017.

Objective % Select and utilize tools to design and develop websites.

Links and Comments in HTML5

Internal and External Links

Links and Comments.

Hyperlink Anchor tag and its attributes Four Types of URL

Hosted by Coach Slanina

Objective % Select and utilize tools to design and develop websites.

Links and Comments.

Hyperlink Anchor tag and its attributes Four Types of URL

Lesson 4: Hyperlinks.

Links and Comments.

Links and Comments.

HTML Links CS 1150 Fall 2016.

Hyperlinks Anchor Tags.

4.00 Apply procedures to add content by using Dreamweaver. (22%)

Presentation transcript:

Lecture Navigation

What is Navigation? Hypertext – creates links Process of linking from a page to: –Another page in the same website –Another page on a different website –A graphic –A document, worksheet, or PDF –A song, video, etc

Your Site Navigation index.html products.htmlabout.htmlinvestorrelations.html links.html Link Text

The Anchor Tag … Creates an element that becomes a hyperlink with the HREF attribute set to: –URL –File –Image –Document

The Anchor Tag Click for Options. The opening anchor tag has target that specifies where the hypertext will take you. Anchor Hypertext

Tag Attributes Tags can have attributes that further specify how they look or act... All tags can have attributes: Better to do formatting style sheets attributetagvalue

Common Types of Links Internal - Links to a web page that is part of the same website External – Links to a web page somewhere else on the internet – Launches a blank using the user’s default program

Internal Links Link to a page on your site: Click here to buy something. HOME

Internal Links (cont.) You can also link to any kind of file: –Excel Workbook, Word Doc, or PDF –MP3 or WAV or WMA or WMV –Image Click here

External Links Link to a page on the internet: Visit Microsoft’s homepage. Check out Comp25, what a great class! Required on external links!

Linking to Click here to me.

Special Notes Links are CasE sEnsiTiVe Filenames must match exactly Products.html  products.html My File.doc  MyFile.doc graphic.gif  graphic.jpg

Link Troubleshooting Click Here Click Here to Me

Navigation Easy to find –Links should stand out –Special section of the page Predictable –A viewer should be able to interpret your navigation very quickly –Navigation should be identical from page to page

Symbols Symbols Link