CSCI N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Navigation, Links & Images.

Slides:



Advertisements
Similar presentations
4.01 How Web Pages Work.
Advertisements

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.
 To create page, Komodo Editor  To share web page, UNC SERVER, ISIS (  To transfer page to ISIS,
Absolute vs. Relative Paths/Links
CPSC 203 Introduction to Computers Tutorial 59 & 64 By Jie (Jeff) Gao.
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.
Web basics Keywords: Web Server, Browser, Local, Remote, HTML, URL.
27 September. Thursday’s Current Event: Follow Up Lands End Already offers VoIP eBay to purchase Skype Connect buyers and sellers Google Offers instant.
Lecture Navigation. What is Navigation? Hypertext – creates links Process of linking from a page to: –Another page in the same website –Another page on.
13 February Building a Web Page. Links Links: One always links to an anchor point Every page has an implicit anchor point at the start In addition, can.
Topics in this presentation: The Web and how it works Difference between Web pages and web sites Web browsers and Web servers HTML purpose and structure.
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.
ETT 229 Fall 2004 Web Design Basics III. Agenda 11:00-11:05 – Quiz 15 11:05-11:40 – Web Design Lecture 11:40-12:15 – Web Design Practice 3.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Hyperlinks.
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.
Public_html sites website1 website2 Server Folder Sequence & Website Uniform Resource Locator (URL) Address Example
INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.
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.
CPSC 203 Introduction to Computers Lab 66 By Jie Gao.
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.
CHAPTER 3 USING HYPERLINKS TO CONNECT CONTENT. LEARNING OBJECTIVES How to use the and anchor tag pair to create a text-based hyperlink. How to use the.
Developing a Web Site. Web Site Navigational Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating.
Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.
1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.
Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.
CPSC 203 Introduction to Computers Lab 23 By Jie Gao.
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.
UNIT 2 UNIT 2 Module 3: HTML Lists Overview. List There are two common types of HTML lists Ordered list numbered Unordered list bullet points.
ET710 HTML Paths: Dot Dot Slash Notation. Directory (folder) Hierarchy. We can think of a computer’s file structure as a tree with branches. The trunk.
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.
Site Organization. The Need to Organize Site Files Thus far, we have placed all our site files into the main (root) website folder. As a website becomes.
When you are linking your Web site together, use relative URLs. A relative URL gives the path to the file to which you wish to link, relative to the page.
Website design and structure. A Website is a collection of webpages that are linked together. Webpages contain text, graphics, sound and video clips.
To be completed Your proposal  Your House style  Your site plan  Page plans (a draft layout for each of your five pages)  A design mock-up -  All.
A Few Key Vocab Words That you should know! By Dr. Bowie.
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 .
Hit125 application concepts Types of links File paths & directory structures.
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.
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.
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,
HTML Links and navigation Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand advanced production methods for web-based digital media.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
XP 1 Charles Edeki AIU Live Chat for Unit 2 ITC0381.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Lecture 8 Introduction to Web Programming. Announcement  First In-class exam will be on Oct. 10 (Wednesday)  2.50pm – 4.05pm  Exam will cover all materials.
UNIT 3 – WEB DESIGN FINAL PROJECT – DAY 2 Exploring Computer Science – Lesson 3-11.
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.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
HTML Links CS 1150 Spring 2017.
4.01 How Web Pages Work.
4.01 How Web Pages Work.
Site Organization.
HTM: Section 2 Hypertext Links Different section of same page
Site Organization.
How files are organized
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
CNIT 131 HTML5 – Anchor/Link.
A01 DESIGN To be completed Your proposal  Your House style 
Hyperlinks, Images and Tables
Chapter 6 pp
4.01 How Web Pages Work.
HTML Links CS 1150 Fall 2016.
Website File Management
ME 123 Computer Applications I Lecture 38: More on HTML 5/20/03
Presentation transcript:

CSCI N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Navigation, Links & Images

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Goals By the end of today’s lecture, you should … … understand how to create relative paths to files.… understand how to create relative paths to files. … understand how to create absolute paths to files.… understand how to create absolute paths to files.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science First, A Few Notes … In web development, we use the forward slash ( / ) to indicate a directory.In web development, we use the forward slash ( / ) to indicate a directory. Always begin with the current document in mind.Always begin with the current document in mind. Use../ to go back a directory level.Use../ to go back a directory level.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Absolute Links To create a link to another site (one outside of your own public_html directory), use the full URL for the site: create a link to another site (one outside of your own public_html directory), use the full URL for the site: To include a link for your , use the mailto: protocol: include a link for your , use the mailto: protocol:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Fill in the Blank public_html images index.html smiley.gif Create an in index.html to display the image smiley.gif. ANSWER:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Fill in the Blank public_htmlabout_us index.html Create a link from beginnings.html to index.html. ANSWER: Our Home Page history beginnings.html

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Fill in the Blank public_htmlabout_us support.html Create a link from beginnings.html to support.html. ANSWER: Our Support Page history beginnings.html services

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Fill in the Blank public_html support.html Create a link from support.html to IUPUI’s website. ANSWER: Visit IUPUI services

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Questions?

Feedback: Privacy Policy Feedback
Do Not Sell My Personal Information
About project: SlidePlayer Terms of Service

© 2025 SlidePlayer.com. Inc. All rights reserved.