Today we discussed several HTML related subjects, including tables and forms. We also spent a fair amount of time discussing paths and how to create links between files.
We also reviewed the homework assignments. Most of the student decisions were solid except for nested hierarchies. I think that in the future I will emphasize creating a nested architecture of HTML that provides the most semantic information possible for content items.
Paths
Students learned about relative and absolute paths and worked through a short student assessment for creating paths between files.
Relative Paths
The natural path starting with one file and to another. This is probably the most common format for links between files on the same server.
Good things to remember
-
“current working directory” is the directory where a file is located. For instance, the index.html file is located in the root of the server. If we link from the index.html file, then the current working directory is “root”.
-
“../” means to move up one director to the parent of the current working directory.
-
“/” means to move down into the next directory.
Examples:
theironweb.com
-root- index.html
|
|-img-
| |-face.jpg
|
|-sub-
|-products.html
|-aboutus.html
In the proceeding example, we have the root of the site. In the root is the index file and two directories, “img” and “sub”. In the “img” directory is one image, “face.jpg”. In the “sub” directory are two files, “products.html” and “aboutus.html”.
A path from index.html to products.html: “sub/products.html”
A path from aboutus.html to face.jpg: “../img/face.jpg”
A path from products.html to index.html: “../index.html”
Absolute Paths
Absolute Paths start at the root of a site and are usually full urls.
Examples:
A path to products.html: “theironweb.com/sub/products.html”
A path to face.jpg: “theironweb.com/img/face.jpg”
A path to index.html: “theironweb.com”
Tables
Students learned about the table tags and structure and how to control the width and span of table cells. They marked up a table of baseball statistics (yeah!).
Tags to remember:
- table
- td
- tr
- tbody
- thead
- tfoot
Forms
Students learned about the structure of forms, get and post requests, actions and most of the common form field options. Students composed a survey for collecting data about the movie watching habits of users.
Tags to remember:
- form
- formfield
- legend
- label
- input
- textarea
- selectbox
Also remember that many form fields are determined by their type attribute. The input form field can be a checkbox, a text input, a radio button, submit, and many other input types. Please review the w3c tags page for a full listing.