HTML cont’d Keywords and Tables Many thanks to Ron Vullo, for original content from Molly slides.
What’s in Your <head>? <title> Provides a concise description of the page and its purpose <meta> Metadata: “data about data” Not rendered by the browser, but still used in other ways Tells us the language/character set to render in Tells us information about the program we used to write the HTML Also provides keywords used for search engines to index the page <meta name=“keywords" content=”words, here, that, describe, content, for, search, engines" /> Though, Google doesn’t use these any more… Discuss, perhaps demo, the addition of metadata keywords. Each keyword is in quotes, separated by commas. Now, Google ignores keywords and analyzes body text. In particular, it checks for real sentences and grammar and stuff, so that simple page bots don’t get tons of ads. Domain parking and hosting services now do “domain name optimization” whereby they have someone write 400-1000 words to make pages look more real.
CSS and HTML These two languages need to work together. We’ve seen some of this already, but to work with them we need to know a little more about how CSS “sees” HTML. Everything in HTML/CSS is a “box”
The Box Model CSS treats your web page as if every element (<p>, <div>, <span> …) is enclosed in an invisible box. CSS allows you to change a large number of the properties of this box, such as its border, color, position, flow, etc. to achieve the look and feel you are striving for.
Properties of the “Box” we can set background-color background-image border Width height margin padding position and related properties top: right: bottom: left: Image from Ron Vullo’s Molly slides (http://molly.rit.edu/modules/aux/slides/showslides.maml?t_HeaderText=Introduction%20to%20Multimedia&t_LectureID=72#)
Margin vs. Padding Margin adds space “outside of the box” Padding adds space “inside of the box”
Tables What are they good for? Many thanks to Ron Vullo, for original content from Molly slides.
Tables Remember, the Web was originally a scientific collaboration experiment. So a lot of data was being shared. Tables were created for tabular data. Used for layout (not very well) until CSS-P. You might demo tables here, but there’s a place for it with slide 6
Tables Table Rows Cells Header cell <table> </table> <tr> </tr> Cells <td> </td> Can span columns with colspan, and rows with rowspan Header cell <th> </th> Draw a small table on the board to illustrate colspan and rowspan
Table Properties Tables share a lot of properties of “the box.” padding, border, colors, etc.
Tables: What Are They Good For? Tabular data! NOT layout! Lots of WYSIWYG programs used, or still use, tables for layout. Dreamweaver MX used tables for layout. Take the students to Amazon.com. Do a View Source and scroll down. The page is actually laid out using tables! Argh!
Tables Demo Let’s do it!