CpSc 130 : Introduction to Programming and Information Systems

CpSc 130 Notes HTML Basics

HTML Basics

An HTML file consists of opening and closing html tags.
Most elements consist of an opening tag, followed by content, followed by a matching / closing tag.
Nested inside the html tags is a head and a body.
Inside the head, we have a nested title, usually displayed in the window frame.
Most of the content is nested withing the body.

Here we have a heading and a paragraph.

<html>
  <head>
     <title>First Page</title>
  </head>
  <body>
     <h1>Simple page</h1>
     <p>This is my first web page!</p>
  </body>
</html>

Formatting

There are six levels for headings. How they are displayed depends on your browser.

<html>
<head>
	<title>Headings</title>
</head>

<body>
    <h1>This is an h1</h1>
    <h2>This is an h2</h2>
    <h3>This is an h3</h3>
    <h4>This is an h4</h4>
    <h5>This is an h5</h5>
    <h6>This is an h6</h6>
</body>
</html>

This is an h1

This is an h2

This is an h3

This is an h4

This is an h5

This is an h6

Headers and paragraphs automatically start on a new line and provide some vertical white space.
Paragraphs are important for grouping text.
Browsers ignore where you put newlines (also called Returns or Enters) in your source file (example).
<p>Notice that each element consists of an opening tag, some content affected by that tag, and a matching closing tag.</p>
THIS IS IN A "P" tag
<p>HTML source can get very hard to read, so we indent and leave spaces to make things easier
You will add comments to your source code
I call commenting code DOCUMENTATION
Always document your name and the purpose of the assignment!
>Note that the comment starts with . In programming, this is called a block comment because it can span multiple lines. (Very useful for "debugging" a web page.

Links - The Anchor tag

Links (or anchors) specify a file to be retrieved (using the href attribute), however the file is not requested unless the viewer clicks on the link
the current page displays text or an image that is clickable
When the user clicks on it, the file referenced is then requested as a new page to be displayed
In current jargon, the user "goes to" the new page.
This implies that the anchor element must have content (something the user can click) and, therefore, a closing tag.

The Anchor

<a href="aFileName"> clickableContent </a>

aFileName

The file name, which includes the file extension, must refer to an existing file. If the file does not exist (perhaps because it moved or there is a typo), your current page will still display, but clicking will cause an error. Note that there are quotation marks around the attribute. This is a convention we will use for all attributes.

clickableContent

Usually words that the browser displays as clickable text. The content can also be an image. But, something has to be here to be clicked!

</a>

Everything between <a> and </a> is clickable.

Pathnames

Think in terms of files on your computer. If you open a file using just the file name, the file must be in your current directory. If it is somewhere else, you need to tell the computer how to find it. Usually, we do this with a graphical tool that lets us "browse" to the correct directory and click to specify the actual file.
You can also specify the file by giving the full pathname, starting at C:\, or the relative path name, starting at your current directory. Since we don't generally do this... ask for a demo.
There are two key differences for specifying web pages:

The root, or starting point, of the search for the file is either the current directory (same) or the root of the web server file system (not C:\). At the moment, this is a bit of a fine point since you will mainly be specifying relative paths.
Specifying a file from some other server is a bit like specifying a file on some other disk drive (H:\ instead of C:\). In our case, we would then use the full web URL:
http://host/fullPathOnServer

Details

First, note that in the WWW we always use the forward slash (/), not the back slash (\) preferred by MS.
A reference starting with http:// must specify the web server address followed by the full path name of the file (from the server's root).
A reference starting with some name followed by a slash (/) must be a directory (folder) name. Since the server can only "see" subdirectories within the current directory, the name must match a directory within the current directory.
If there is another name followed by a slash, the new subdirectory must be within the directory we just found. Keep doing this until you reach the file name, which must match a file in the final directory.
If we want to move up a level instead of down, we use .. (dot-dot) to refer to the parent of the current directory. (Remember we can't "see" the name of the parent, so we use .. to move up one level.) Since each directory can have only one parent this will always work unless you try to go beyond the root.

Example

Open this example in your own browser.
<p>You should have fun <a href="ch02ex02.html"> <img src="images/comedy_th.png" alt="laughing image"> </a> while learning HTML.</p> <p>Seriously, take another look at the <a href="ch1.html">chapter 1 notes</a> or maybe you wanted <a href="ch2.html">chapter 2</a>.</p> <p>Image provided by <a href="http://www.pdclipart.org"> Public Domain Clip Art</a>.</p>	You should have fun while learning HTML. Seriously, take another look at the chapter 1 notes or maybe you wanted chapter 2. Image provided by Public Domain Clip Art.
Note that the last link (anchor) is to an external web site. The first link (anchor) is the (inline) image itself. It links to the file below.
<html> <head> <title>Are we having fun yet?</title> </head> <body> <h3>For real fun, click <a href="ch02ex02.html">here</a>. </h3> </body> </html>	For real fun, click here.

Why use relative path names?

With all the dot-dot stuff, it might seem relative path names are too complicated, but not so...
File structures are often moved or copied to new locations and sometimes directories (folders) are renamed
With relative path names, nothing in your page changes as long as your own files don't move or change names

Images

Images are included using a special element that has an attribute specifying the image file Since there is no "content" (only the image attribute), it does not have a closing tag There are only a few of these tricky tags: <img src="ch01ex01.gif" alt="image of sample page" border="0"> View the example in your browser. Why do we have alternate text? Screen readers and errors. See example.
I'm using that pesky <img> tag that has no content again (and, therefore, no closing tag) <img src="ch01ex02.gif" alt="image of sample page" border="0"> View the example in your browser.

Lists

Lotsa Lists

Lists may be used in normal text or inside of tables. You have seen lots of them in these notes.

**Manual or Custom — Doing the work ourselves**
A list may be created manually using any character or even an image as a bullet <br>£ Manual list <br>£ Ordered list <br>£ Unordered list <br>£ Definition list	A list may be created manually using any character or even an image as a bullet £ Manual list £ Ordered list £ Unordered list £ Definition list	<br>* Manual list	A list may be created manually using any character or even an image as a bullet * Manual list * Ordered list * Unordered list * Definition list
<br><img src="13_stars_us_flagTiny.gif"> Manual list <br><img src="13_stars_us_flagTiny.gif"> Ordered list		A list may be created manually using any character or even an image as a bullet Manual list Ordered list Unordered list Definition list
A commonly seen list image: <br><img src="missingImage.gif"> Manual list <br><img src="typo.gif"> Ordered list		A commonly seen list image: Manual list Ordered list Unordered list Definition list

**Ordered Lists**
This is a default ordered list: <ol> <li>Manual list</li> <li>Ordered list</li> <li>Unordered list</li> <li>Definition list</li> </ol>	This is a default ordered list: Manual list Ordered list Unordered list Definition list	<ol type="A">	Manual list Ordered list Unordered list Definition list
<ol type="a">	Manual list Ordered list Unordered list Definition list	<ol type="I">	Manual list Ordered list Unordered list Definition list
<ol type="i">	Manual list Ordered list Unordered list Definition list	<ol type="i" start="3">	Manual list Ordered list Unordered list Definition list
Sublists, auto numbered <ol> <li>Manual list</li> <ol> <li>Special</li> <li>Keyboard</li> <li>Images</li> </ol> <li>Ordered list</li> </ol>	Sublists, auto numbered Manual list Special Keyboard Images Ordered list	Sublists <ol> <li>Manual list</li> <ol type="i"> <li>Special</li> <li>Keyboard</li> <li>Images</li> </ol> <li>Ordered list</li> </ol>	Sublists Manual list Special Keyboard Images Ordered list

**Unordered Lists**
This is a default unordered list: <ul> <li>Manual list</li> <li>Ordered list</li> <li>Unordered list</li> <li>Definition list</li> </ul>	This is a default unordered list: Manual list Ordered list Unordered list Definition list	<ul type="circle">	Manual list Ordered list Unordered list Definition list
<ul type="square">	Manual list Ordered list Unordered list Definition list	<ul style="list-style-image: url(redball.gif)">	Manual list Ordered list Unordered list Definition list
Sublists, auto "numbered" <ul> <li>Manual list</li> <ul> <li>Special</li> <li>Keyboard</li> <li>Images</li> </ul> <li>Ordered list</li> </ul>	Sublists, auto "numbered" Manual list Special Keyboard Images Ordered list	Sublists <ul> <li>Manual list</li> <ul type="square"> <li>Special</li> <li>Keyboard</li> <li>Images</li> </ul> <li>Ordered list</li> </ul>	Sublists Manual list Special Keyboard Images Ordered list

Tables

Tables are used for two purposes in HTML or web design
1. the same as the use of tables in Word or even Excel, organizing information in rows and columns sometimes makes things much easier to understand. Like tables in Word, our tables may be visible, with lines between rows and columns, or invisible, without lines. Either way, a table can format the information for easy comprehension. We will experiment first with this kind of table.
2. to organize the web page itself
  You may have noticed that there are limits to how well HTML allows us to organize a web page.
  By dividing the page into rows and columns, without including lines, we can easily locate information where we want it.
Tables are by far the most complicated HTML we have encountered! Nevertheless, you will find them quite useful for both of the purposes described above.
Every table is enclosed in a pair of tags <TABLE> </TABLE> very much like all of the content of a web page being enclosed by the BODY tags.
Inside the table, we have a sequence (top to bottom) of rows.
Each row is enclosed by the Table Row tags: <TR> </TR>.
Inside of each row, we have a sequence (left to right) of data cells — it wouldn't be right to call them columns, because only one item appears in each.
The contents of one cell is enclosed by the Table Data tags: <TD> </TD>. Yikes!
Examples of Simple Tables