HTML and CSS Reference
In-Depth Information
6. Test the file in the validator. Fix the errors as follows:
• Convert the attributes for the
body
element into style rules in the
maa.css
style
sheet. (Hint: The
link
,
alink
, and
vlink
attributes can be replaced with
pseudo-classes to set the colors of all hyperlinks, active links, and visited links in
the Web page, respectively, to white.)
• Create a style rule in the
maa.css
style sheet to set the background color and
width of the different tables and table cells in the page layout. (Hint: Use the id
values to identify the different table cells and embedded tables.)
• Use proper syntax for any empty elements.
• Create style rules to set the color and text alignment of the
h4
elements in the
document.
• Ensure that all two-sided tags are properly closed.
• Replace the use of the
align
attribute with the
float
style for the two inline
images aligned on the right margin of their container.
• Remove all deprecated elements and attributes.
7. Continue to validate your document until it passes the validation test for XHTML 1.0
strict. Once it passes, add an icon indicating that it has passed in a paragraph at the
bottom of the file.
8. Legacy pages often used tables to define the page layout. Nicole suggests that you
also create another version of this page in HTML5 that employs only CSS layout
styles. Open the
maah5txt.htm
and
maah5txt.css
files in your text editor. Enter
your name
and
the date
in the comment section of each file, and then save them as
maah5.htm
and
maah5.css
, respectively.
9. As best you can, recreate the appearance of the Gargoyle Collection Web page in
HTML5 format and using CSS styles.
10. Write a summary comparing the structure and complexity of the document design
using Web tables to the document design using HTML5 and CSS. Which one is eas-
ier to maintain and document for others?
11. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
Case Problem 3
Explore how
to combine
elements from
XHTML and
MathML in a
single document.
Data files needed for this case Problem: back.jpg, math.css, mathml.txt, mhlogo.jpg,
quadtxt.xhtml, side.jpg
Math High
Professor Laureen Cole of Coastal University, owner of the Web site Math
High, has been studying the XML vocabulary MathML and how it can be used to display
mathematical equations and information. She's asked you to create an XHTML document
that contains elements from both XHTML and MathML. A preview of the page that you'll
create is shown in Figure 9-31.
