Intermediate (X)HTML

58112 (X)HTML: Intermediate, Section A

Class Description: Increase your practical knowledge of (X)HTML, including using tables to create imaginative webpage layouts. Learn to add forms to your website, and explore more of CSS’s uses, including its ability to format every page in a website with a single style sheet, and an introduction to CSS positioning properties. Finally, gain an overview of Web technologies such as JavaScript, DHTML, XML, and PHP. Prerequisite: 58111.

Resources

http://www.la.unm.edu/~bjudd/IT145-HTML/resources/HTML6ed_examples/localindex.html

1. Getting Started

Introductions and announcements

About browsers

Sample files

Viewing page source

Using Wordpad or Textedit

To Do: Open the Resources link above in another tab.

2. Tables [Ch 16, p 227]

Tables are used for two main purposes

• data presentation: laying out tabular data, as in a spreadsheet (this is a good use)

• page layout: dividing your page up with tables for the purpose of layout (this is no longer a good use)

While the role of tables in page layout will decrease with the increasing use of CSS, they are a critical component of many web operations.

Tables require three tags:

<table>

Establishes the fundamental structure of the table. Among others, <table> takes the following attributes:

width: values expressed in pixels or percentages

<table width=”500″>
<table width=”75%”>

cellpadding: defines distance from the inside border of a cell to the content. Values expressed in pixels

<table cellpadding=”3″ width=”500″>

cellspacing: defines distance between cells in a table. Values expressed in pixels.

<table cellspacing=”4″ cellpadding=”3″ width=”500″>

border: determines the thickness of the table’s outside border only. Expressed in pixels.

<table border=”3″ cellspacing=”4″ cellpadding=”3″ width=”500″>

<tr>

Establishes individual rows in a table. Typically, not used for much formatting but required for sound table structure. <tr> is nested inside table:

<table>
<tr>
. . .
</tr>
</table>

<th> and <td>

Establish individual cells in a row. <th> denotes a header cell; <td> denotes a content cell.
The tags take the same attributes, including the following:

width: Defines the width of an individual column. Cumulative cell widths must equal the width of the table.

<td width=”125″>
<td width=”25%”>

height: Defines the height of an individual row.

<td width=”125″ height=”35″>

align: Defines the alignment of content within the cell. Values are left/center/right.

<td width=”25%” height=”35″ align=”center”>

valign: Defines vertical alignment of individual cells. Important because table cells default to middle vertical alignment. Values are top/middle/bottom.

<td width=”25%” height=”35″ align=”center” valign=”top”>

Example Table:

<table border=”1″ width=”75%” align=”center” cellspacing=”3″ cellpadding=”2″>

<tr height=”40″>

<th width=”25%”>Date</th>
<th width=”25%”>Input</th>
<th width=”25%”>Outtake</th>
<th width=”25%”>Cost</th>

</tr>

<tr>

<td>Saturday, August 5</td>
<td>Rio Embudo Input, Pilar, NM</td>
<td>Horseshoe Outtake</td>
<td>$140</td>

</tr>
<tr>
<td colspan=”4″>Reservations are required for all trips!</td>
</tr>

</table>

Create a new site folder. Create a new index.htm inside it.

Design a simple three-column table layout. Choose some simple graphics from Google Images or your own source. Merge the top row for your header graphic. Include a text title for your site.

In the center cell of the body of the page, create another table with at least four column headings. Put a little sample text in at least two of this table’s cells.

Insert a few fake menu items in the layout column on the left.

Insert some filler text in the layout column on the right.

Preview your page in at least two browsers. Test it by resizing your browser window, and optionally by resetting your monitor’s resolution, if you’re familiar with doing that.

3. CSS Selectors [Ch 7, p 119]

Style rules

Comments

Inheritance, Specificity and Location

Internal and external style sheets [p 128]

Selectors: [p 138]

Name

Class

ID

Context

Parts

State

Groups

Create and link an external style sheet in your site folder.

Create and apply a “#” (id) style for your text site title.

Create and apply a “.” (class) style for your table text.

Create and apply a style that selects your table headings automatically.

Create and apply a style (of the type of your choice) for the menu items.

Tip: see http://hacks.mozilla.org/2009/07/slick-tables-with-css-3-selectors/

4. CSS Formatting [Ch 10, p 151]

Fonts and alternates

Bold

Italic

Line height (leading)

Size

Color

Background

Indents

Case

Decoration

5.CSS Layout [Ch 11, p 169]

Divs and the Box Model

Backgrounds

Height, Width and Margins

Position:relative [p 178]

Position:absolute [p 179]

Position:fixed [p 180]

Float: [p 181]

Remove your site graphic and text title from the top cell of your table.

Create a div, name it, and put your graphic and text title into it. Preview.

Now set the size, margin/padding, and absolute position of your new div.

Remove the embedded table and place it above your old table, below your new div. Position it in the center, with room for your left and right layouts.

Remove the menu items from the left layout column, create a new div for them, and place them inside. Position this div on the left.

Remove the filler text from the right column, create a div, and place the text there. Position this div on the right.

6. Dynamic Effects with CSS [p 189]

Display: and visibility:

Rollovers and popups

Drop-down menus using lists and CSS

7. Forms [Ch7 p 253]

Creating and submitting forms

Text boxes

Password boxes

Pick lists

Radio buttons and check boxes

Hidden fields

8. Javascript

Events: body:onload http://www.w3schools.com/jsref/event_onload.asp

<html>

<head>

<script type=”text/javascript”>

function welcome()
{
alert(“Welcome to my site!”);
}

</script>

</head>

<body onload=”welcome()”>
<h1>My Site</h1>
</body>

</html>

Calling Javascript from a button [p 316]

Form Validation: http://www.w3schools.com/js/js_form_validation.asp

function validate()
{
var
x=document.forms[“Form1”][“firstname”].value;
if (x==null || x==””)
&nbsp; {
&nbsp; alert(“First name must be filled out”);
&nbsp; return false;

&nbsp; }
}

 

<form name=”Form1″ action=”result.php” onsubmit=”return validate()”
method=”post”>

First name: <input type=”text” name=”firstname”>

<input type=”submit” value=”Submit”>

</form>

Implement validation on your form.

http://www.w3schools.com/js/js_form_validation.asp

http://www.tizag.com/javascriptT/javascriptform.php

http://www.elated.com/articles/form-validation-with-javascript/

http://www.webcheatsheet.com/javascript/form_validation.php

http://www.itechies.net/tutorials/jscript/jsexample.php-pid-jform.htm

Showing and hiding elements:

http://www.codeave.com/javascript/code.asp?u_log=7078

9. A Glimpse of PHP

About PHP [p 256]

Implement the PHP email form script [p 258].