Fun With HTML

NOW Learn Some HTML

1. Intro and Basics
2. Tables
3. Sample Page
4. Useful Tags

First off, know that an HTML page contains TWO main sections: head and body. The head contains all of the "behind the scenes" information, like scripts, styles, META tags (one of which, "description", is what pops up on Google when you search for a site). The body contains all of the elements that you actually see on your page, like text and images. We will be focusing on how to format in the body section.

HTML stands for HyperText Markup Language and it is essentially a hierarchy of objects with defined properties and text.

You know about Object-Oriented Programming in Java and how objects have instance variables - or properties - like any object you might see in the real world. A textbook, for example, as a color, a certain number of pages, a height, width, author, etc. You also know how you can make complex programs made up of several objects. Your desk in your room, for example, might contain one particular textbook in the top left corner, your computer in the middle, a calculator at the bottom right, etc.

Likewise, your HTML page is a blank space where you can place several different "objects." Among the most useful are:

• tables
• links
• images
• paragraphs
• divisions
• headers
• lists

These objects are referred to as tags in HTML. Each one must be opened and closed, like a method or class in Java. But the syntax differs. To write a table, you write

<table>

<a>

There are only about twenty tags you’ll ever use, but the real flexibility comes from adding attributes to these tags. So if, for example, you want to make a link to another website in your HTML document, there is a tag that specifies a link, but you use an attribute to tell it where the link points. Attributes are written inside the opening tag. Tags can have more than one attribute, in any order. The contents of the attribute must be written inside quotes. An example:

<tag1 attrib2="somevalue" attrib1="someothervalue">. . .</tag1>

Each tag has a set of possible attributes (like Java classes have instance variables). Many of the same tags can use the same attribute, but some are just limited to certain tags. For example, the most important attribute of the <a> tag is href which stands for hypertext reference. This is the url you want to link to. How do you incorporate this attribute? Like this:

<a href="http://www.seas.upenn.edu/~cse110">Go To CSE110</a>

... and this would look like this: Go To CSE110

Similar to the <a> tag is the image tag, written:

<img>

<img src="mypicture.jpg">

A Bit About Tables...

A great way to organize the structure of your webpage is through the use of tables.

The <table> tag has these fundamental properties:
- border (does it have a border? How big is the border?)
- cellspacing (how far apart are each of the cells in the table?)
- cellpadding (how far inside the cell from the border are the items?)
- width
- height
- align (center? Left? Right?)
You specify these attributes within the <table> tag. For example:

<table border="1">
<tr>
<td>cell 1</td><td>cell 2</td>
</tr>
<tr>
<td>cell 3</td><td>cell 4</td>
</tr>
</table>

...would create something that looks like this:

So if we add more style to this table, we might add to the <table> tag:

<table border="1" cellspacing="10">

...and that would make the table look like this:

...and adding:

<table border="1" cellspacing="10" cellpadding="10" align="center">

...would center the table and make it look like this:

Now then, the best way to figure out what these properties do is to create your own test HTML file and play around by changing the values, saving the page and viewing it in a browser window. Make sure that when you're testing, you set the border to something greater than 0, otherwise you won’t see any structure!

Within the tables are table rows <tr> and table data <td>. The table rows should be obvious, but table data is really the columns in each row. It's best not to define anything within the <tr> tag and rather define it all in the <td> tag. This tag has properties such as:
- bgcolor (background color)
- width
- height
- align (for the objects within the cell, how are they aligned?)
- style

Not only can you align the entire table to either side or to the middle, you can also align the text, or images, or whatever, inside a cell to either side, middle, or to the top or bottom. For instance:

You simply put the align attribute in the <td> tag (or in the <tr> if you want to affect the whole row). Like <td align="right">.

valign means Vertical Align. In the first cell below the valign is set to bottom and in the second valign="top".

left is the default for align and middle is for valign.

Here are a few useful tags:

<html> - opens every HTML document. Closing tag is required at the end of the document. No useful attributes.

<head> - opens the header portion of the HTML document. Closing tag is required, usually right before the <body> tag begins. No useful attributes.

<body> - opens the main (displayed) portion of the HTML document. Closing tag is required, usually right before the </html> tag. No useful attributes.

<title> - the text to appear in the title bar of the browser goes in between the opening and closing <title> tags. This tag must appear within the <head> section. No useful attributes.

<div> - stands for “division” – a basic block of space that can contain any HTML structures. <div> is usually used to group together text/elements that you want to style in a certain way. No useful attributes.

<span> - similar to <div>, but instead of creating a BLOCK of space, <span> marks off text and other elements which are part of a larger block/flow of text. A two <div>…</div> tags in a row will each appear on different lines, whereas however many <span>…</span>s in a row will “go with the flow.” No useful attributes.

<a> - usually used to create links.  The most important attribute is href , which should contain the path, either relative or absolute, of the page you want to link to. The text you want to display as the link goes between the opening and closing tags.

<img> - place an image on the page. The most important attribute is src which should contain the path to the image file. The latest version of the (X)HTML specification requires an alt attribute, which should contain some (small amount of) text describing the image.  Other useful attributes include height and width which can be set if you want the image to appear smaller than it is. Since there is NO CLOSING TAG for <img>, you must put a slash before the closing bracket. Example:

<img src=”foobar.jpg” height=”120” alt=”foobar’d!” />  

<table> - the beginning of a table structure. There are a number of possible attributes, cellspacing, which denotes the spacing between each cell (dead space), cellpadding , which denotes the margin around whatever is being displayed inside the cell, border , which draws a border, etc. Much of the functionality provided by these attributes can also be done in CSS, which is preferred. One attribute that has no CSS equivalent is valign , which specifies  the vertical alignment of elements in the table. Possible values are “top”, “middle”, or “bottom.”

<tr> - starts a table row.

<td> - starts a table cell. Useful attributes include colspan , which denotes how many of the table columns immediately to the right this cell should take up (so colspan=”2” would essentially merge this cell with the cell to its right), and rowspan , which does the same thing for rows.

Tables will be explained in much greater depth in class.

<br /> - line break. No closing tag, so requires a closing slash.

<b> - all text within the opening and closing tag is bold. No attributes.

<i> - all text within the opening and closing tag is italic. No attributes.

<u> - all text within the opening and closing tag is underlined. No attributes.

Some Useful Resources

...for continuing your HTML learning...

• eFishDesign HTML & CSS Tutorial
• Your HTML Source.com
• HTML Quick Reference Guide
• w3schools HTML tutorial
• ...or look around on Google. There are hundreds, if not thousands, of HTML tutorials