Style Sheets, Frames, Image Maps, and Tables
Because XHTML (unlike HTML) enforces the distinction between content (tags) and format (styles), XHTML documents must use style sheets rather than formatting tags (<i>, <center> etc) to determine how page elements are displayed. There are three ways to add a style to an XHTML element. You can find examples of all 3 in the web pages I have created for this course. Follow the links in the list below to see an example of each. I suggest you right click on each and open it in a new browser window, so that you can easily switch back to this window after following the instructions in each file.
Frames are used to divide the browser window into 2 or more parts (frames) and display a different html file in each frame. A web page that uses frames must have one html file for each of the frames, plus a special html file called the frameset that defines the frames. There is a special document type definition (DTD) heading that must be used for frameset files (see xhtml1-template-frameset.html for a template). Only the frameset file gets this DTD; the html files for each of the individual frames should be strict or transitional XHTML documents.
The following examples will get you started with frames. Each will open in a new browser window.
Images can be included in a document with the <img> tag. Take a look at the source for the file fritzi.html to see a simple example.
A more complicated use for images in a web page is an image map. Follow the link to the file image-map1.html and explore both the rendered page in the browser and the document source to help you answer the following questions.
12. What happens when you position the cursor over a "hotspot" in an image map in the browser window? What in the document source determines what is displayed when you position the cursor over a hotspot?
13. Which dog has a circular hotspot? Rectangular? trapezoidal? Which of these hotspots have a hyperlink to another XHTML file?
Tables format information in rows and columns. Although they are easier to create in graphical editors than by hand, knowing how to code a table in XHTML is important when using scripts to create dynamic web content. Tables are often used to display information retrieved from a database, for example. To generate a table dynamically, you'll need to know the tags for tables to include in your scripts.
Now that you are properly motivated, take a look at the page tables1.html which contains an example of a table, and answer the questions in that file.
16. PROJECT: Briefly describe your project you propose to do for the course. Be sure to make it clear what you want to accomplish (what it should do). Then create an outline showing the sub-goals you will need to accomplish to do the project. Then identify the tools you will need for each subgoal (web page, forms, accessing a database, etc) as best you can. If you are not sure what tool you need, state what you need it to do and ask for suggestions. Put an asterisk next to any tools you already know how to use/develop. Then sketch a timeline for completing the subgoals.