Required elements

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

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

<body>

</body>
</html>
Notes

Links

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

We know how links work

To create a link, wrap the clickable text in an anchor tag <a>. Clicking the link takes the visitor to another page.

The opening tag <a> requires an href attribute. href (hypertext reference) tells the browser where to go — the destination URL or file path.

Each part of the tag has a name:

A link to a file in the same directory:

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

Paths (Pathnames)

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



Relative Pathnames 
     <a href="./file.html">

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 

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

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

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

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

Visual — file tree with a.html as starting point 
myproject/
  ├── a.html  ← you are here
  ├── b.html           href="./b.html"                <!-- "." = current folder -->
  ├── c.html           href="./c.html"
  └── images/
      └── photo.jpg    href="./images/photo.jpg"    <!-- go INTO images/ -->

website/
  ├── other.html       href="../other.html"            <!-- ".." = go UP one level -->
  └── myproject/
      └── a.html  ← you are here



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. 


	

	<a href="http://people.reed.edu/~miyos/F26/ILCP/ilcp_schedule_f26.html>"
	
	<a 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 relative pathnames are useful: the links keep working even if you move the project folder.

Relative vs absolute path comparison diagram
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

URL anatomy diagram showing protocol, hostname, and pathname
Notes

Naming files and pathnames

Notes

Linking to a Specific Location in a page

Sample file [before] [after]

By default, clicking a link loads the destination page starting from the very top. But what if the page is long and you want to send the visitor directly to a specific section?

Concept: linking to another page

A.html — the source (where you click)
... page content ...
<a href="B.html">
  Go to B
</a>
... more content ...
The href value is just the filename — the browser loads that page from the top.
→
B.html — the destination (where you land)
... top of B.html ...
... Chapter 1 content ...
... Chapter 2 content ...
... more content ...
↑ browser always starts at the top of the page

To jump to a specific spot, add a # and an ID name to the href. You also need to mark that spot in the destination page with an id attribute.

Concept: linking to a spot inside a page

A.html — the source (where you click)
... page content ...
<a href="B.html#ch2">
  Go to Chapter 2
</a>
... more content ...
The #ch2 after the filename tells the browser where to scroll to inside B.html.
→
B.html — the destination (where you land)
... top of B.html ...
... Chapter 1 content ...
<a id="ch2"></a>
Chapter 2
... Chapter 2 content ...
↑ browser scrolls directly to id="ch2"

Step 1 — Mark the destination spot in B.html using the id attribute:

<a id="ch2"></a>
<h2>Chapter 2</h2>

Step 2 — Link to it from A.html by adding #ch2 after the filename:

<a href="B.html#ch2">Go to Chapter 2</a>

This works across the web too. For example, the Wikipedia page for Reed College has id="Campus" at the start of the Campus section, so this URL jumps straight there:

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

You can also jump to a spot within the same page. The technique is identical — just leave out the filename and use # and the id alone.

Concept: linking to a spot on the same page

the page — one document, scrolls in place
<a href="#ch2">
  Go to Chapter 2
</a>
... more content ...
... more content ...
↓ scroll
... more content ...
... more content ...
<a id="ch2"></a>
Chapter 2
... Chapter 2 content ...
No filename before the # — the browser stays on this page and scrolls to id="ch2"

The code is the same as before — only the href changes. No filename, just the #:

<a href="#ch2">Go to Chapter 2</a>
Notes