HTML 3

Required elements

<!DOCTYPE html>
<html>

<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 I AM NEXT TO YOU
Absolute Pathnames I AM AT LATTITUDE 39.09 LONGITUDE 173.48

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/F23/ILCP/ilcp_schedule_f23.html"

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

index.html

If a filename is not specified, "index.html" is assumed. Hence, the following will produce the same result.

    <a href="http://www.reed.edu/art/courses/index.html"> Courses </a>

    <a href="http://www.reed.edu/art/courses/"> Courses </a>

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

Assume case-sensitive and beware of special characters.
Avoid white spaces in URLs.
Unless you have a very good reason to do so otherwise, stick to basic alphabets, numbers, and "-"(bar) or "_" (underbar) in your URLs.
For a good summary on special characters, go to the HTML URL Encoding Reference.

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