Class 3 - Paths and Links
NOTE: From this point forward, all html pages submitted must have these basic page tags: <html> <head> <title> <body>
Paths & Links
C01 - Link Basics & Absolute Paths
- C01a - (5:59)
- Links are what made the web.
- Hypertext
- hypertext - definition @w3c: www.w3c.org/WhatIs.html
- Hyper = more than normal
- Hyperactive, Hypertension
- http: hypertext transfer protocol
- Also ftp: file transfer protocol
- Do you really want to know more? http://en.wikipedia.org/wiki/URI_scheme
- http request-response system in the client-server model
- http header
- Click on a link or type in a web address and Enter/Return.
- It sends a request from you computer (also referred to as client, browser, user agent)
- ...to a web server for a page.
- The html file is sent back (usually), sometimes after creating the page based on database information.
- Also sent are any images, flash files, video, and audio that the page’s code specifies.
- URL = Uniform Resource Locator
- Parts:
- “scheme” - almost always http://
- server name
- domain name
- top level domain
- ICANN is in charge of TLDs and domain disputes: http://www.icann.org/
- http://en.wikipedia.org/wiki/List_of_Internet_top-level_domains
- .tv = Tuvalu a tiny nation.
- path to the file
- These file names are often used for home pages because they will be sent back by the server by default if no file is specified: index.html, default.html
- Parts:
- C01b - (3:41)
- Link Basics
- The anchor tag <a> - two main uses and attributes:
- Linking to another web page or a location on a web page.
- Key attributes: href (hypertext reference)
- target=_blank
- Identifying a section of a page.
- Linking to another web page or a location on a web page.
- Key attributes are:
- id and/or name (name is deprecated but still used)
- More on these later
- href attribute = hypertext reference
- Used for text and image links (image links and hot spots will be covered later)
- The text used for the link goes between opening and closing <a> tags.
- Example (see this page's code): http://www.noaa.gov/index.html
- Add this attribute and value to have the page open in a new window: target=_blank
- The anchor tag <a> - two main uses and attributes:
- Link Basics
- C01ba - (3:03)
- Absolute paths
- Absolute paths are relative to the entire web
- They will work on any web page that’s connected to the web assuming that the file they point to is available on the web.
- Absolute paths start with http:// (sometimes https://)
- http = hypertext transfer protocol
- Absolute paths
- C01c - (1:49)
- Links exercise
- Create a file named yourlastname_C01.html
- Use this HTML title: yourlastname - C03
- Make a 3 row, 1 column table.
- Enter the following names, one in each cell.
- The Library of Congress
- The Getty Center
- State of California
- Make the words above into links to those locations using absolute paths with full web addresses including http://
- Include in each the target=_blank attribute.
- Test them before sending them!
- Links exercise
C02 - Relative Paths
- C02a
- (6:05)
- Relative paths:
- ...use less code than absolute paths which means that your page will load a bit faster.
- ...make your site easier to test offline than absolute paths.
- ...make your site easier to migrate to another domain.
- There are two types of relative paths: site root relative and document relative.
- Let me try to explain what they are and how they differ, which is not easy to do and not easy to comprehend! Let me start with an analogy:
- Imagine that there is a company that occupies an entire tall office building.
- There are one or more employees in each office.
- Now imagine the the building represents your web site.
- The building is your site, which is simply a folder that contains all of your site's folders and files.
- Each floor is folder in that web site.
- Each office is a sub-folder inside of the floor's folder.
- Each employee has a seat number in his or her office. Consider each employee to be an html file.
- With some having less in their "heads" than others ;-)
- A site root relative path would provide to the location of an employee relative to the entire building (the site).
- Directions to an employee would be provided like this:
- Go to the 11th floor (a folder named "11" at the top level of your site)
- Go to office 359 (a folder named 359 which is a sub-folder inside of folder 11).
- I sit in seat 3 (which is an html file inside of folder 359).
- These directions could be provided to anyone in the building regardless of where that person (or file) is.
- Site root paths/directions will work regardless of where the employee is that seeks the other, as long as the employee being sought remains in the same location provided.
- Directions to an employee would be provided like this:
- A document relative path would refer to the location of an employee relative the other employee's office::
- Go up one flight.
- When you get off the elevator, turn right.
- My office is the second office on the left.
- I sit in the desk on the left.
- Those directions are relative to each employees' respective locations - there is no reference to the entire building.
- Those directions will work assuming that each employee remains in the same location in relation to the other.
- The directions will continue to be accurate if both employees move one floor up to seats in the same relative location on the new floors.
- Imagine that there is a company that occupies an entire tall office building.
- Relative paths:
- C02b - (5:33)
- More about relative paths:
- Site Root relative paths - are relative to the top level folder of the site, the folder that contains all the site's files. That folder is the site's root.
- In a file at a web site, a site root link's path starts with a forward slash /
...which represents the top folder at the site - the root. Every folder name after it represents sub-folders of the site. - A link that uses a site root relative path will work regardless of where in the site a page is that contains the site root relative link.
- The location of the file that the link points to must be in the specific location provided, but the file containing the link to it can be anywhere in the site and still work.
- A site root relative path is similar to an absolute path (and is sometimes referred to as absolute) in that there is a top level that contains all the files.
- But unlike an absolute path, a site root relative path is relative to the folder that contains all the site's files (the site's root folder), instead of being relative to all the files on the entire web.
- In a file at a web site, a site root link's path starts with a forward slash /
-
Document relative paths are relative to both the location of the file that has the link in it and the file that the link is pointing toward.
- They will work only if the files are in folder locations relative to each other as specified in the link path.
- If the file being linked to is in the same folder as the file with the link to it, then the link only needs to include the file name of the file being linked to, for example:
- href=anyfile.html
- If the file being linked to is in a sub-folder of the folder containing the file linking to it, then the name of the sub-folder needs to be included in the path. So, if the file being linked to were in a sub-folder named sub then the document relative link would be:
- href=sub/anyfile.html
- If the file being linked to is above the file with the link to it, the paths uses syntax (a rule for writing code) that is used by UNIX as follows:
- A path linking to a file in a folder directly above will start with the following, which indicates one folder level up:
../
- For example, this will provide a successful link to a file named anyfile.html if that file is in the folder above the file containing the link to it:
href=../anyfile.html
- For example, this will provide a successful link to a file named anyfile.html if that file is in the folder above the file containing the link to it:
- If the file being linked to is two levels up, this would be used:
../../
- This will link to the file named anyfile.html if that file is in the folder two folder levels above:
href=../../anyfile.html
- This will link to the file named anyfile.html if that file is in the folder two folder levels above:
- And so on, adding a set of
../for each folder level up that the link needs to refer to.
- A path linking to a file in a folder directly above will start with the following, which indicates one folder level up:
- Site Root relative paths - are relative to the top level folder of the site, the folder that contains all the site's files. That folder is the site's root.
- C02c - (11:14)
C03 - Named Anchors
- C03a - (4:07)
- Named locations on a page.
- Useful for tables of contents or going to the top of a page.
- To identify a location: <a name=top id=top></a>
- Include both the name and the id attributes because the id attribute is not recognized by some old browsers, yet html5 does not support the name attribute.
- Each attribute is to have the same value, in this case top.
- Note that the closing tag is required even though nothing will be put between the opening and closing tags.
- To link to a location on a page:
- At the location that you want the link to go to:
<a name="anyword" id="anyword"></a> - To create a link to that location from somewhere else on the page:
<a href=#anyword>
- At the location that you want the link to go to:
- You can also go to a named anchor on a different web page using code such as the following which uses a URL followed by # and the location name (the path probably wraps in your browser, but the code would be on one continuous line):
- <a href="http://www.gottheknack.com/a_htmlCss/weeks/week3/c/namedAnchorDemo.html#midNowhere> Middle of Nowhere </a>
- Added note: The name attribute is declining in usage.
- Named locations on a page.
- C03b - (13:21)
- Important note:
Be sure to include a closing </head> tag - I did not add it in the video :-o
- Please include it in your file!
- Important note:
Be sure to include a closing </head> tag - I did not add it in the video :-o
C04 - PDF and Email Links
- C04a - (6:09)
- PDF link exercise:
- Create a folder named:
c04pdf - Create a pdf file with an inspirational message.
- Name that pdf file:
c04pdf- Note that a .pdf file extension will be added automatically in almost all cases. The actual name of the file will be:
c04pdf.pdf...in order for the link to work.
- Note that a .pdf file extension will be added automatically in almost all cases. The actual name of the file will be:
- Use these instructions for creating a PDF and linking to one:
- Name that pdf file:
- Create an html file with a relative link to it. Name that html file
c04pdf.html - You will end up with three things that start with the name c04pdf:
yourlastname_c04pdf...a folder,yourlastname_c04pdf.pdfyourlastname_c04pdf.html
- Send me that folder as part of the folder you send me for this week's work.
- C04b - (6:19)
NOTE: Near the end of the video I give the incorrect course ID number to be included in the assignment. Please use the ID number you put in your email subject lines when you send me email. - Email links: introduction and exercise:
- Email links will only work if the person clicking on the link is not using web mail and has an email program on their computer that they use. Or, if they have made certain browser preference settings which I doubt they would do.
- Therefore, if you do create an email link, be sure to also display the email address so that it can be copied by highlighting and copying. Right-clicking on an email link will also usually provide an option to copy the email address.
- A basic email link is this simple:
<a href="mailto:address@isp.com">email link text</a>
- To pre-populate with additional information the email that will be created when a viewer clicks on an email link (information such as a subject line, a cc address, and body text all pre-entered), see this lengthy example:
<a href="mailto:address@isp.com?subject=The time of your life&cc=you@anywhere.com&body=Email is ubiquitous">Email link text</a>- Here is an example you can try it out with if you have an email program.
- Assignment:
- Create a new file and name it Yourlastname_C04.html
- Put an html title in that says: Where are the male, female and Email rest rooms?
- Put a <h1> header at the top of the page that says Email link with embedded subject and cc
- Then make an email link that includes:
- Use this text for the link text to be clicked on:
- Contact us
- Have it go to your email address (I will test it that way).
- It cc's to me (dan@gottheknack.com).
- Subject: Subject of the Queen
- ...and add at the end of the subject line the standard id number that you put in your email subject lines when sending me mail. Please do not use the ID number stated in the video!
- Use this text for the link text to be clicked on: