HTML - Hypertext Markup Language

HTML files are text files containing human readable markup. A text editor is just the tool we need to edit files containing HTML.

'Hello World' in HTML

Edit a new file called 'hello.html' and type this text in:

<!--The following is a level-1 headline -->
<h1>Hello World </h1>

Make a copy of the file you created using this shell command, then use your browser to "File | Open" the two files you just created.

cp hello.html hello.txt

In the browser, you should see that one of these renders (displays) differently from the other. Browsers have different rulesets for rendering file content triggered by the file extension (local files) or the HTTP 'content-type' header (remote files served by a webserver).

HTML 5 tag syntax

<h1 id='hello'><i>Hello</i> World</h1>

h1 is the name of a tag. Note the matching opening <h1> and closing </h1> tags.
id is a tag attribute.
hello is the value of a particular attribute.
Nesting: No tag pair should ever enclose just one tag of another tag pair.

In XHTML tag names, attributes, and values must be lowercase, and tag attributes must be surrounded with either single- or double-quotes. Also all unmatched tags (see line break below) must be properly terminated, e.g. <br />.

Common HTML tags

Paragraph-like tags that by default render with an empty line above and below include p, h1, h2, h3, h4..., blockquote, div.

tags for making lists include ul, ol, li, dl, dd.

tags for differentiating text include b, i, tt, em, strong, del, code, span.

Get more information on any tag by googling, for example, html ul tag.

HTML 5 has new elements like nav, footer, section, article.

Try it!

Google around to figure how to use the dl tag and a few others to construct a "Definition List".

Put the requisite tags into an HTML file and see how it renders in your browser.

If you don't already know... on a Mac ⌘-C , ⌘-V , ⌘-X are shortcuts to copy, paste, and excise from one application to another.

HTML 5 file structure

<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8' />  
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>This is the title</title>
</head>

<body>
<p>Your page content here</p>
</body>

</html>

That sure is a lot simpler DOCTYPE than in the past, and is designed to trigger standards-compliant rendering in all browsers.

Create a page on www.goshen.edu

You can "shell in" to another server (if you have privileges) from a terminal window like this:

ssh {username}@www.goshen.edu

Type exit when you're done.

On the GC webserver, you'll find that you have a folder called 'mypages'. You should verify that if you create a page named 'page1.html' under mypages that it shows up in your browser when you go to the URL http://www.goshen.edu/~{username}/page1.html

Parts of the page

<html>...</html> -- "Container" for all the html on this page.

<body>...</body> -- "Container" for the contents of the page--all the things that show up in the display area of your web browser.

<head>...</head> -- "Container" for all the info about this page, such as the page title, styles that determine how the content will display, eventually links to javascript files, summaries for search engines of the content, etc.

Validating your html

You can validate (check the syntax) of any page on a publicly available webserver by pasting the URL of your page into a form on a validator:

Linking

There are 3 tags that we'll use frequently that involve linking to another file:

<a href='blah.html'>Jump to blah</a>
<img src='blah.jpg' alt='picture of blah' />
<link href='theme.css' rel='stylesheet' type='text/css' media='all' />

Relative links

Let's say that my file system is organized as in this picture...
Finder view of filesystem

...and that I'm working on a link in the file 'thing1.html' located at /Users/paulmr/Sites/gitstuff/about/thing1.html like:

<a href="[what to put here?]">

This is what you'd put in the href attribute to link to some of the files shown:

href="morestuff.html"
href="sub/thing2.html"
href="../trescientosdos.tar"

Root-relative links

Let's say that gitstuff.com is a website with a webserver running with its document root set to Users/paulmr/Sites/gitstuff. Then the following hrefs would work from any page on gitstuff.com:

href="/about/morestuff.html"
href="/about/sub/thing2.html"
href="/about/"    [with most webservers, would pull up index.html]

Absolute URLs

The following hrefs would work from any website in the world:

href="http://gitstuff.com/about/morestuff.html"
href="http://gitstuff.com/trescientosdos.tar"

Within a web page

href="morestuff.html#hello" will jump to a particular location within a file if it's been marked with an id or link anchor, e.g. with:

>h3 id="hello">Welcome to gitstuff.com</h3>

Or, inside of morestuff.html itself you could use href="#hello"

Homework - link jumping

Part 1

On the GC webserver, create 3 web pages that validate as HTML5 pages, which contain relative links that will allow you to follow one link in each web page taking you on this circular journey...

www.goshen.edu/~{username}/page1.html
-> www.goshen.edu/~{username}/page2.html
-> www.goshen.edu/~{username}/downunder/page3.html
-> www.goshen.edu/~{username}/page1.html

Extra challenge - add a relative link from page3.html that takes you directly to: www.goshen.edu/~{username}/anothersubdirectory/pagex.html