140 the missing link an introduction to web

140
The Missing Link: An Introduction to Web Development and Programming
Chapter 22
}
#right{
min-width:100px;
max-width:150px;
float:left;
}
@media only screen and (max-width: 479px){
video{ display:none; }
#left{
width:100%;
float:none;
}
#main{
width:100%;
float:none;
}
#right{
width:100%;
float:none;
}
#header{
background:url(
batman-logo-big.gif) no-repeat;
background-size:100px 60px;
background-position:center;
height:100px;
}
}
</style>
Now, our floats and min/max rules will do the best they can until the device screen is less
than 480 pixels. At that point our special style will kick in for mobile devices, putting our
divs in a vertical row, hiding and resizing content, and making the divs as wide as the screen.
Our site, without changing any HTML, will now look like the following:

141
The Missing Link: An Introduction to Web Development and Programming
Chapter 22
We can also use media queries to set styling for when a user prints our page, without
requiring them to click a link to a special version (selecting print from a browser menu
would trigger this style) by using @media print{}.
The full list of options for @media are as follows:
Table 6 Media Types
Name Description
all All devices.
aural Text-to-speech readers.
braille Tactile responsive devices.
embossed Printing to braille printers.
handheld Small portable devices.
print Print view.
projection Slides and presentations.
screen Computer screens (regular size
and up).
tty Teletype terminals.
tv TV displays.

142
Section 2 Assessments
For each of these assignment, complete each bulleted step and submit all files (HTML, CSS,
scripts, images, etc.) necessary by zipping and submitting your assignment folder.
Your First Page:
• Your name, the course, and semester commented at the top of the file
• Create body, header, and footer sections
• Create a div named content between your header and footer
• Set a page title that displays in the browser tab
• Place an address in an address tag in your footer
• Your name at the top of the page as an <h1> heading in your header
• Add a few paragraphs about yourself to your content div
• Add a list of hobbies or interest displayed as an HTML unordered list to
content
• Link at least two of your hobbies or interests to websites related to those
interests
Fun with Media
• Your name, the course, and semester commented at the top of the file
• One image as part of your page
• A short audio clip (or link to available audio filand player
• A short video clip (or link to available videand player
• Set both audio and video clips to have controls and not play automatically
• Give your video clip a placeholder image
Tables on Chairs
• Recreate the following table in HTML
• Use style attributes to set cell colors as needed
• Use the caption tag to label your table

143
The Missing Link: An Introduction to Web Development and Programming
Assessments
Production Levels for Chairs This Week:
Monday Tuesday Wednesday Thursday Friday Total
Stools 5 5 5 (quota met) 15
Rolling (out of materials) 10 15 25
Standard Leg 4 8 12 4 28
Registration Form
• Create a form with an action attribute of post
• Give it the following fields, and a submit button:
• First Name, Last Name
• Email Address, Email Address Again
• Age
• A “Plan” select box that contains Basic, Premium, Titanium options
• A checkbox asking if the user wishes to be added to a mailing list
• A shirt size radio set that has values of Small, Medium, Large
Adding Some Style
•