…when you own all the files…you can link to them directly

Slides:



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

Absolute vs. Relative Paths/Links
. Website and file organization. How websites work.
Create internal and external links Create internal links to named anchors Insert Flash Text Create, modify, and copy navigation bar Manage Web site links.
Web Design Professor Pepper. Site vs. Page  Create a folder for your site  all pages and pictures  Default page will be index.html (some servers are.
ETT 429 Spring 2007 Web Design Basics II. Publishing Web Pages Activating your NIU website Go to this.
AdvWeb-1/15 DePaul University SNL 262 Web Page Design Links In HTML Instructor: David A. Lash.
Adding an image to a page in Dreamweaver Uploading files to x10hosting Editing uploaded files in x10hosting Adding links in Dreamweaver Uploading linked.
AdvWeb-1/13 DePaul University SNL 262 Web Page Design Links In HTML Instructor: David A. Lash.
Planning and Setting Up a Website. Creating a Website – Planning Stage  AUDIENCE -- who will visit your site? What information do they need? What needs.
Public_html sites website1 website2 Server Folder Sequence & Website Uniform Resource Locator (URL) Address Example
1 After completing this lesson, you will be able to: Define your goals for a Web site. Analyze your audience. Create a blueprint for your Web site. Design.
INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.
Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!
Pre-Coding Web Design – Sec 3-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
MAKING A WEBSITE WRA AGENDA Go over some website basics and reminders Issues or problems? Continue to SCRUM Work.
HTML (Hypertext Markup Language ). Hyperlinks Hyperlinks from text to other sites Write the link, which is visible at the screen Example: Hyperlink to.
Getting Started with Dreamweaver Original by Patricia Setser 4/07 Updates by Margaret Lion 2010.
My published PowerPoint presentation What is required. When it is due (by Friday noon of finals week) is the deadline. How to do it. How to publish it.
How to upload files to Altervista Overview:
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.
Planning your site/organization on the Web Please use speaker notes for additional information!
INTRODUCTORY Tutorial 6 Using Links on a Web Page.
Dreamweaver: Introduction and Basics. Introduction 4 Dreamweaver is a WYSIWYG HTML editor 4 WYSIWYG = What You See Is What You Get. 4 BUT..
Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc. Slide 1.
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.
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.
Hyperlink Basics Relative vs. Absolute Linking. Absolute Linking This type of linking always includes the prefix If you link to someone else’s.
Adding Images to Your Web Page Web Design Section 5-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
CSCI N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Navigation, Links & Images.
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.
Determining the URL for a Web Document. Components The URL of a web document consists of 1.The server address 2.The folder structure 3.The file name.
The basic HTML School Net Japan Naoto Kurimoto. Today’s Goal Understanding the basic structure of HTML How to use basic HTML tag,,,,,,, etc… Making the.
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,
Introduction to HTML C151 Multi-User Operating Systems.
Open the index.html Open this PowerPoint from the S Drive IDT folder Chapman Images.ppt.
HTML Lesson 2. Internal Hyperlinks  Internal Hyperlink is a link that links to another page within a website.  Make another page using notepad++: page2.html.
HTML Links and navigation Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
HTML CODE Fill in your handout from notes on the slides!!
On Site Optimization. On site optimization in my experience consists of two things. –1) naming convention of pages –2) inner linking strategies.
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”
Basic Web Design UVI CELL Dave Gilliss Dave Gilliss
Basic Web Design UVICELL Week 4 Templates and site management Week 4 Templates and site management.
Spring 2009 Kevin Cole Gallaudet University
HTML Links CS 1150 Spring 2017.
HTM: Section 2 Hypertext Links Different section of same page
Pre-Coding Web Design – Sec 3-1
HTML Lesson 3.
Relative Paths.
Links. Links Links Need to define two things: The destination Something to click on to get there Tag is click here Can be text, special.
My web site..
Page plans A01 Design.
Links.
How files are organized
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
HTML Introduction Lecture 8.
A01 DESIGN To be completed Your proposal  Your House style 
Putting An Image on Your Web Page
Links.
HTML Links.
Web & Mobile App Directory Structure
Chapter 6 pp
HTML.
HTML Links CS 1150 Fall 2016.
One Set of Styles Connected to As Many Pages as You Want!!!
Rules for Relative URLs
4.00 Apply procedures to add content by using Dreamweaver. (22%)
ME 123 Computer Applications I Lecture 38: More on HTML 5/20/03
Presentation transcript:

…when you own all the files…you can link to them directly Relative Links Means you specify where the link leads relative to where you currently are (what page?)

If pages are in the same directory (file folder) Link ON page1.html to page2.html my-site page1.html page2.html <a href=“page2.html”>Page 2</a>

If page is one folder deeper Link ON page1.html to page2.html my-site fold page1.html page2.html <a href=“fold/page2.html”>Page 2</a>

If page is two folders deeper Link ON page1.html to page2.html ..pattern continues if even deeper folders my-site fold page1.html inner page2.html <a href=“fold/inner/page2.html”>Page 2</a>

If page is outside current folder Link ON page1.html to page2.html my-site fold1 page1.html page2.html <a href=“../page2.html”>Page 2</a>

If page is in Different folder Link ON page1.html to page2.html my-site fold1 fold2 page1.html page2.html <a href=“../fold2/page2.html”>Page 2</a>

Note .. Means go back a directory If I need to exit out of two folders <a href=“../../page2.html my-site fold1 page2.html fold2 page1.html

Pattern holds To escape back out of folders Need a ../ for each folder you’re escaping

Terms to use when folders are relative to each other A is the parent directory B is the child directory A B

Naming Conventions All this can be confusing enough Name files appropriately: NO SPACES! – smoosh words or use hyphens Name folders (directories) after what they contain Name images based on what they show Name HTML files based on what they contain Main HTML file for a site is ALWAYS index.html