SAIC WiredWeek 7: Introduction to HTML

HTML FAQSummary

What is HTML?Hyper Text Markup Language: a formatting system used to display files in browser applications like Safari, IE, Firefox and Opera. HTML is not a programming language, it is a set of formatting rules. Examples of programming languages include: Java, Javascript, Perl, etc.

Define: path, URL, HTTP URL

Path (computing)From Wikipedia, the free encyclopedia

A path is the general form of a file or directory name, giving a file's name and its unique location in a file system. Paths point to their location using a string of characters signifying directories, separated by a delimiting character, most commonly the slash "/" or backslash character "\", though some operating systems may use a different delimiter. Paths are used extensively in computer science to represent the folder/file relationships common in modern operating systems, and are essential in the construction of URLs.A path can be either absolute or relative. A full path or absolute path is a path that points to the same location on one file system regardless of the working directory or combined paths. It is usually written in reference to a root directory.A relative path is a path relative to the current working directory, so the full absolute path may not need to be given to locate the file.

Two dots ("..") are used for moving up in the hierarchy, to indicate the parent directory; one dot (".") represents the directory itself. Both can be components of a complex relative path (e.g., "../mark/./bobapples"), where "." alone or as the first component of such a relative path represents the working directory. (Using "./foo" to refer to a file "foo" in the current working directory can sometimes be useful to distinguish it from a resource "foo" to be found in a default directory or by other means; for example, to view a specific version of a man page instead of the one installed in the system.)

URL, Uniform Resource LocatorFrom Wikipedia, the free encyclopedia

A Uniform Resource Locator (URL) is a string of characters conforming to a standardized format, which refers to a resource on the Internet (such as a document or an image) by its location. For example, the URL of this page on Wikipedia is http://en.wikipedia.org/wiki/Uniform_Resource_Locator.

An HTTP URL, commonly called a web address, is usually shown in the address bar of a web browser.

Tim Berners-Lee created the URL in 1991 to allow the publishing of hyperlinks on the World Wide Web, a fundamental innovation in the history of the Internet. Since 1994, the URL has been subsumed into the more general Uniform Resource Identifier (URI), but URL is still a widely used term.

The U in URL has always stood for Uniform, but it is sometimes described as Universal, perhaps because URI did mean Universal Resource Identifier before RFC 2396.

URI references, absolute URL vs. relative URL

The term URI reference means a particular instance of a URI, or portion thereof, as used in, for instance, an HTML document, in order to refer to a particular resource. A URI reference often looks just like a URL or the tail end of a URL. URI references introduce two new concepts: the distinction between absolute and relative references, and the concept of a fragment identifier.

An absolute URL is a URI reference that is just like a URL defined above; it starts with a scheme followed by a colon and then a scheme-specific part. A relative URL is a URI reference that comprises just the scheme-specific part of a URL, or some trailing component thereof. The scheme and leading components are inferred from the context in which the URL reference appears: the base URI (or base URL) of the document containing the reference (its namespace).

A URI reference can also be followed by a hash sign ("#") and a pointer to within the resource referenced by the URI as a whole. This is not a part of the URI as such, but is intended for the "user agent" (browser) to interpret after a representation of the resource has been retrieved. Therefore, it is not supposed to be sent to the server in HTTP requests.

Examples of absolute URLs: • http://en.wikipedia.org/w/wiki.phtml?title=Train&action=history • http://en.wikipedia.org/wiki/Train#Freight_trains

Examples of relative URLs: • //nl.wikipedia.org/wiki/Train • /wiki/Train • Train#Passenger_trains

Case-sensitivity of URLs

According to the current web standards, the scheme and host components of the URL are case-insensitive, and when normalized during processing, should be lowercase.

Other components of a web site should be assumed to be case-sensitive. For example, when you link a page named “Tim_portfolio.html” you must always capitalize the “T” in that particular file name for the browser to find the proper file.

Define: host, protocol, network port

HTTP URLs in everyday use: protocol, host, network port

An HTTP URL combines into one simple address the four basic items of information necessary to retrieve a resource from anywhere on the Internet: • the protocol to use to communicate, • the host (server) to communicate with, • the network port on the server to connect to, • the path to the resource on the server (for example, its file name).

A typical URL can look like:http://en.wikipedia.org:80/wiki/Special:Search

In the example above: • http is the protocol, • en.wikipedia.org is the host, • 80 is the network port number on the server (as 80 is the default value for the HTTP protocol, this portion could

have been left out entirely), • /wiki/Special:Search is the resource path, that is accessed by this URL

Most web browsers do not require the user to enter "http://" to address a webpage, as HTTP is by far the most common protocol used in web browsers. Likewise, since 80 is the default port for http it is not usually specified. One usually just enters a partial URL such as www.wikipedia.org/wiki/Train.

To go to a homepage one usually just enters the host name, such as www.wikipedia.org.

Basic HTML tagsThese tags and many more control the look and feel of a web page.

<html></html>Creates an HTML document

<head></head>Sets off the title and other information that isn't displayed on the Web page itself

<body></body>Sets off the visible portion of the document

Header Tags

Below is HTML code for a very simple web page.

Type this into any text editor: here try out Apple’s TextEdit, an app that comes free with Mac OS. WordPad is the comparable app on a PC platform.

<HTML><HEAD><TITLE>My page</TITLE></HEAD><BODY>hello world!</BODY></HTML>

Now remove all text formatting from the page so you can save it as an HTML document.

Make a new directory on your desktop: “MyTestSite”

Save your doc as yourname_simplepage.html.

Just for fun, save another copy in the same directory, but name it:

“yourname_simplepage.txt”

Now try opening both pages (the .html and the .txt) in a browser, below, see Safari: File>Open

File, then locate the MyTestSite directory/files.

Which one looks like the web page you thought you had formatted for?

Below, see that the .txt file loads each character into the browser window.

Which one looks like the web page you thought you had formatted for?

Below, see that the .html file loads only the text that we typed in the <BODY> tag. The <TITLE> tag puts the text “My page” into the top center of the browser window.

Demonstrate use of same tags in BBEdit. Cut and paste code from TextEdit into BBEdit.

BBEdit is a very useful HTML text editor. Note we can see the exact path to the file we are working on. We will work with BBEdit primarily to create HTML files.

There’s an easy way to preview your file in a browser window using BBEdit’s Markup>Preview.

Demonstate use of these tags in BBEditAdd some color! These tags are contained within the body tag.

Body Attributes<body bgcolor=?>Sets the background color, using name or hex value<body text=?>Sets the text color, using name or hex value<body link=?>Sets the color of links, using name or hex value<body vlink=?>Sets the color of followed links, using name or hex value<body alink=?>Sets the color of links on click

Matching hex numbers?Demonstrate how to determine a hex value for a color

using the eyedropper tool in Photoshop.

Try adding these attributes to your body tag in the simple page you just typed.

<BODY bgcolor="#0066FF" text="#FFFFFF">

If you would prefer to not use hex numbers, some standard color names are recognized by browsers. Try this:

<BODY bgcolor=blue text=white>

Text Attributes: defined within “visible” or <BODY> tags.

Demonstate use of text formatting tags in both BBEdit and in TextEdit

<hl></hl>Creates the largest headline

<h6></h6>Creates the smallest headline

<p></p>Creates a paragraph

<br>Creates a single carriage return (line skip)

Can you edit your page now to reproduce this?

The code looks like this:

<HTML>

<HEAD><TITLE>My page</TITLE></HEAD>

<BODY bgcolor=blue text=white><h1>hello world! </h1><h2>hello world!</h2><h3>hello world!</h3><h4>hello world!</h4><h5>hello world! </h5></BODY></HTML>

Text Attributes: defined within “visible” or <BODY> tags.

Demonstate use of text formatting tags in both BBEdit and in TextEdit

<em></em>Emphasizes a word (with italic)

<strong></strong> Emphasizes a word (with bold)

<font size=?></font>Sets size of font, from 1 to 7, 7 being the larger)

<font color=?></font>Sets font color, using name or hex value

<p></p>Creates a new paragraph

<p align=?>Aligns a paragraph to the left, right, or center

Try using the <p> tag and the align functions to create these additions:

Note that the <em> or italic tag is also used.

The additons are:<p align="center"><em>hello world!</em></p>

<p align="left"><em>hello world!</em></p><p align="right"><em>hello world!</em></p>

Font attributes like the <em> tags are typically nestedinside the <p> or paragraph tags.

ADDING LINKSAbsolute links vs. relative links

Sample relative links:

Sample absolute links:http://webmail.artic.edu

http://www.artic.eduhttp://www.mcachicago.org

mypage2.htmlmyresume.html

portfolio/myportfolio.html../index.htm

DefinitonsURL (Universal Resource Locator)

Absolute link

Relative link

Demonstate use of anchor tags

TAG TO DEMONSTRATE TODAY:<a href="URL"></a>Creates a hyperlink

SAMPLE FORMATTING TO TRY:<a href="http://www.mcachicago.org">MCA Chicago</a>

OTHER USEFUL ANCHORS TO TRY:<a href="mailto:EMAIL"></a>Creates a mailto link<a name="NAME"></a>Creates a target location within a document<a href="#NAME"></a>Links to that target location from elsewhere in the document

<BODY bgcolor=blue text=white link=red>

Before adding links, specify a color in the body tag.

Then, add these absolute links to your page:

<a href="http://www.mcachicago.org">hello world!</a>

<a href="http://www.moma.org">hello world!</a>

<a href="http://www.sfmoma.org">hello world!</a>

The third “hello world!” links to the SF MOMA’s website. You can see the URL in the lower “status” bar in your browser window.

When you add a link:IMMEDIATELY TEST IT in a brower!!!!

This is the easiest way to prevent typos. It’s also a good idea to locate the URL you want to link to in a brower window and copy and paste the URL directly into your

anchor tag. Remember to save your page before you test it in a browser.

Once links are tested:Try adding some color and font attributes to link tags:

This line formats the big pink SF MOMA link.

<a href="http://www.sfmoma.org"><font color="#FF00FF" size="+7" face="Verdana, sans-serif">hello world!</font></a>

To switch to a serif font like Times the format would be:

<a href="http://www.sfmoma.org"><font color="#FF00FF" size="+7" face="Times, serif">hello world!</font></a>

WRAP UPRecap and homework for next week

HTMLHTML tags: head, title, body, comment, line break, text formatting, paragraphURLHTTP URLstatus barprotocol (e.g. HTTP)serverpathporttext-editing applications: TextEdit, BBEdit, WordPadabsolute pathrelative pathhex colorrgb colorsource codeand more!

Terminology to remember