Required elements

<!DOCTYPE html>
<html lang="en">

<head>
<title>  </title>
</head>

<body>

</body>
</html>

Notes

Links









Anchor (link): <a> </a>


In order to create a link to another html file, surround the text that acts as a link with an anchor tag. The opening tag <a> includes a href attribute. href (hypertext reference) attribute is used to specify the link destination









A link to a file in the same directory/folder as the current html file:

Sample file [before] [after]
     <a href="./second.html"> Go to another page </a>
   

Notes

Pathnames

Pathnames indicate where the file is located in the filesystem. There are two ways to specify a file.



Relative Pathnames

Navigating the file system hierarchy relative to the current file.

     ". " means the current folder 
     ".." means the folder directly above the current
    "/" represents a delimiting character 

href="./second.html"     <!--  located in the current directory -->

href="../above.html"     <!--  located in the directory one above (parent) -->

href="../../beyond.html" <!-- located two directories above (parent of parent) -->

href="./collection/file.html" <!-- located inside the directory "collection"
                                 in the current directory -->
     


Absolute Pathnames

Specifying the file based on their absolute location on the file system starting from the top. "Top" can be different depending on your system and how you are accessing your file.


	

	href="http://people.reed.edu/~miyos/F24/ILCP/ilcp_schedule_f24.html"

	href="https://en.wikipedia.org/wiki/Hyperlink"

     


Avoid using spaces in pathnames/filenames. There are ways to get around the problem but it is tedious. Use "-" or "_" instead.

Assume case sensitive pathnames. Generally, all lower-case is recommended.




Why using relative pathname is useful:



As long as you keep the folder "myproject" intact, you don't need to worry about where it is in the web server.
  <a href="./c.html"> file C </a> // a link to c.html


You can move the folder myproject somewhere else and the links will stil work.


With absolute pathnames, you have to explictly specify the hiearchy from the top and the links may break if you move the folder myproject somewhere else.
  <a href="http://people.reed.edu/myproject/c.html"> file C </a> // a link to c.html
Notes

URL: Universal Resource Locater

You use URLs when specifying the link and also when you browse. An URL specifies the how and the where with the following syntax:

 protocol://hostname/pathname

As you can see, there are three parts
protocol -- the protocol being used. http, https, sftp...etc 
hostname -- www.reed.edu, www.amazon.com...etc
pathname -- the location of the file



http://www.reed.edu/index.html

http://www.nytimes.com/pages/arts/index.html

http://www.nytimes.com/2012/06/08/arts/design/caravaggio-denial-of-st-peter-met-museum-of-art.html

http://mycomputer.reed.edu/portfolio.html    // you can run a server on your own computer



https://www.amazon.com/gp/yourstore/          // uses https protocol

ftp://ftp.freebsd.org/pub/FreeBSD/            // uses ftp protocol

file:///Users/miyos/Desktop/file.txt 
// Note that there are three slashes (hostname is empty)

mailto://miyos@reed.edu
Notes

Naming files and pathnames

Notes

Linking to a Specific Location in a page

Sample file [before] [after]










Linking to a specific location in a page:








For example, the page https://en.wikipedia.org/wiki/Reed_College
has at the appropriate place
    id="Campus"
  
So you can do this to jump directly into the Campus section of the page


https://en.wikipedia.org/wiki/Reed_College#Campus






Destination document:

Create an Anchor (bookmark) using the id attribute. An anchor functions as the target destination for the link. Place the anchor tag with the id attribute in the place you want to jump to. Give the id a name. (In this case, "ch2").
<a id="ch2"></a>



In the source document:

To create a link within the same document, use the id name with a hashtag (#) in the href attribute

<a href="#ch2">click here</a>





To create a link to an anchor in another document, add the id name with the hashtag after the file name

<a href="B.html#ch2">click here</a>



Notes