58112 (X)HTML: Intermediate, Section A
1. Getting Started
Introductions and announcements
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:
Establishes the fundamental structure of the table. Among others, <table> takes the following attributes:
width: values expressed in pixels or percentages
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″>
Establishes individual rows in a table. Typically, not used for much formatting but required for sound table structure. <tr> is nested inside 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.
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”>
<table border=”1″ width=”75%” align=”center” cellspacing=”3″ cellpadding=”2″>
<td>Saturday, August 5</td>
<td>Rio Embudo Input, Pilar, NM</td>
<td colspan=”4″>Reservations are required for all trips!</td>
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]
Inheritance, Specificity and Location
Internal and external style sheets [p 128]
Selectors: [p 138]
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
Line height (leading)
5.CSS Layout [Ch 11, p 169]
Divs and the Box Model
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
Radio buttons and check boxes
Events: body:onload http://www.w3schools.com/jsref/event_onload.asp
alert(“Welcome to my site!”);
Form Validation: http://www.w3schools.com/js/js_form_validation.asp
if (x==null || x==””)
alert(“First name must be filled out”);
<form name=”Form1″ action=”result.php” onsubmit=”return validate()”
First name: <input type=”text” name=”firstname”>
<input type=”submit” value=”Submit”>
Implement validation on your form.
Showing and hiding elements:
9. A Glimpse of PHP
About PHP [p 256]
Implement the PHP email form script [p 258].