HTML Links and navigation Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

Slides:

Advertisements

Similar presentations

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

Advertisements

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

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.

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,

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

Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.

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.

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

Computer Science 103 Chapter 2 HyperText Markup Language (HTML)

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.

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

File uploading in PHP Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

Chapter 14 Introduction to HTML

Tables in HTML Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

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.

Deleting and Updating Records in MySQL using PHP Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

Page Layout Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.

CS117 Introduction to Computer Science II Lecture 2 Creating an HTML Document Instructor: Li Ma Office: NBC 126 Phone: (713)

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.

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.

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.

History, Navigator, Screen and Form Objects Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.

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.

Internet Applications Development Lecture 5 L. Obead Alhadreti.

Working with background, images and date object Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.

 The tag to create a link is called, which stands for anchor.  You put the address of the page to link to in quotes after href=, like the following:

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.

Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

Introduction to HTML 1 Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.

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

Introduction to JavaScript Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. 1.

Introduction to Cascading Style-sheets (CSS) Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 1.

Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.

XHTML1 Images N100 Building a Simple Web Page. XHTML2 The Element The src attribute specifies the filename of an image file To include the src attribute.

Modeling web applications

INTRODUCTORY Tutorial 6 Using Links on a Web Page.

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.

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.

Week 2- Overview of the internet The construction of a webpage Four Key Elements – how the internet works Elements and Design concepts Introduction to.

Web programming Part 1: HTML 由 NordriDesign 提供

HTML FORMS Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan. 1.

Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,

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 .

CSS properties Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.

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.

HTML 5 Form elements Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

HTML DOM Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.

Developing a Basic Web Site HTML Tutorial 2. Objectives Define links and how to use them. Create element ids to mark specific locations within a document.

1 3/28/05CS120 The Information Era CS120 The Information Era Chapter 4 – More HTML Specifics TOPICS: Frames.

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.

Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.

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

HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links.

HTML Links CS 1150 Spring 2017.

Web Basics: HTML/CSS/JavaScript What are they?

4.01 How Web Pages Work.

Internal and External Links

Internal and External Links

Passing variables between pages

ITI 133 HTML5 Desktop and Mobile Level I

HTML5 Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page

CNIT 131 HTML5 – Anchor/Link.

HTML Links CS 1150 Fall 2016.

Presentation transcript:

HTML Links and navigation Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1

What is HTML? Basic Structure of HTML page Body tag attributes Text formatting tags Lists 2 Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. Summary of the previous lecture

Outline 1.How to link between pages of your site (internal links) 2.How to link to other sites (external) 3.How to structure the folders on your web site 4.Internal document references 5.Link attributes Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 3

1. HTML links The crux of HTML is its capability to reference countless other pieces of information easily on the internet When you link to another page in your own web site, the link is known as an internal link When you link to a different site, it is known as an external link Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 4

1.1 Internal links The element is used to link another document Anything between the opening tag and the closing tag becomes part of the link that users can click in a browser Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 5

1.1 Internal links… To link another page, href attribute of opening tag of is used the value of the href attribute is the name of the file you are linking to For example: Click here Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 6

1.1 Internal links… Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 7

1.1 Internal links… Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 8

1.1 Internal links… Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 9

1.2 External links To link the page of another website, again the href attribute of opening tag of is used the value of the href attribute is the full web address for the page you want to link to rather than just the filename Click here Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 10

1.2 External links … Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 11

2. Directory Structures A directory is simply another name for a folder on a web site The root directory (or root folder) is the main directory that holds the whole of your web site A subdirectory is a directory that is within another directory A parent directory is a directory that contains another directory Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 12

Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 13 Entertainment index.html Videos videos.html Films englishfilms.html urdufilms.html Songs audio.html video.html 2. Directory Structures…

2.1 Referencing a web page Same Directory: When you want to link to, or include, a resource from the same directory, you can just use the name of that file Subdirectory: – sub-directory/…/file-name Parent directory: –../file-name Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 14

….. …. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 15 Entertainment index.html Videos videos.html Films englishfilms.html urdufilms.html Songs audio.html video.html 2.1 Referencing a web page…

3. Internal document references Step 1: Mark locations Step 2: link …… Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 16

3. Internal document references Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 17

3. Internal document references Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 18

4. More attribute for accesskey: – ….. tabindex: – …. target: – …. title: – …. Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 19

4. More attribute for … Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 20

Summary Internal links External links Directory Structure Internal document reference Some attributes of Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 21

Chapter 2, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. References