HTML, Part 2

4-2 Showing Pictures: The Image Tags Image Tag Format –src short for source –alt for text –Can use absolute or relative pathname

4-3 “Clickable” Pictures Pictures can be used as links Anchor “text” is thumbnail image

4-4 Including Pictures With Image Tags GIF and JPEG Images –GIF: Graphic Interchange Format 8 bits (256 colors or levels of gray) PNG is a newer form –JPEG: Joint Photographic Experts Group 24 bits (millions of colors, compression levels) –Extension indicates format (.gif,.png,.jpg,.jpeg)

4-5 Attributes in HTML Tags can include attributes with values – Text alignment (justification) is specified using attributes (default justification is left) Horizontal rule attributes

4-6 Style Attribute Style is another attribute –Used to specify inline CSS –Value can have many properties in a list ( prop1: val1; prop2: val2 …)

4-7

4-8 Attributes for Image Tags Displayed image size can be adjusted <img src=“puffer.jpg” width=“200” height=“200” /> Scales to 200x200 pixels Leaving out dimension will result in browser preserving aspect ratio –E.g.: If original is 800 x 600, and you set width to 400, height will be set to 300

4-9 Browser will happily distort image (original is 2400x2400) Attributes for Image Tags

Styling Position for Images Images are inserted in the page at the point in the text where the tag is specified in the HTML, and the text lines up with the bottom of the image A better way to place images in text is to flow the text around them

Styling Position for Images Make text flow around an image with style attribute – Image with no surrounding text –

Span groups content for styling My favorite fonts are Helvetica, Century Gothic, and Bodoni.

4-13 Applying Style to Improve our Page Add links with local path names to bios Color –Special background and text colors –Color change on “This sentence is false” –New color styling for the headings Horizontal line modified Added floating image

4-14

4-15

4-16 Handling Lists Unordered (bulleted) list – and Ordered (numbered) list – and –Uses same tags Sublists possible Definitional list: – and tags – and for terms – and for definitions (indented)

4-17 Example (Nested Lists) Hydrogen, H, 1.008, 1 Helium, He, 4.003, 2 good for balloons makes you talk funny Lithium, Li, 6.941, 2 1 Beryllium, Be, 9.012, 2 2 Gets rendered as (browser indents each list some) 1.Hydrogen, H, 1.008, 1 2.Helium, He, 4.003, 2 Good for balloons Makes you talk funny 3.Lithium, Li, 6.941, Beryllium, Be, 9.012, 2 2

4-18 Handling Tables Tables use and tags For rows use and For cells use and Caption at top of table – and tags Column headings set up in first row –Use and tags instead of table data tags

4-19 Example Simple Table A B C Dan Jen Pat Mary Tim Bob Will display as A B C Dan Jen Pat Mary Tim Bob

4-20 Controlling Text with Tables Tables can control arrangement of information on a page, e.g. –Series of links across top of page in one-row table –Use no borders –Rows won’t wrap; scroll bar added

4-21 Cascading Style Sheets (CSS) Cascading Style Sheets allows for styling pages Can define themes Suppose we have 25 level-2 headings and we want them all to be styled like this: How to do?

4-22 Setting Global Style Inside tags, make a global style using … tags h2 { color: red; font-family: arial } Another example: tables and elements table {outline-style: solid; outline-color: violet} th {background-color: purple; font-family: courier} td {background-color: fuchsia; font-family: arial; color: white; text-align: center}

4-23 Overriding Style Sheets What if we want to have one table cell with background color “tan” (instead of the global “fuchsia”)? Can override with style attributes inside table Bob In style, closest wins

4-24 Adding Class to Style We can create different style collections, called classes (below uses “sum” and “fall”) table.sum {outline-style: solid; outline-color: lime} th.sum {background-color: lightgreen; font-family: courier; color: green} td.sum {background-color: green; font-family: arial; color: white; text-align: center} table.fall {outline-style: solid; outline-color: red} th.fall {background-color: tan; font-family: courier} td.fall {background-color: brown; font-family: arial; color: white; text-align: center}

4-25 Using Style Classes Now use class names in tags to apply the style selectively......

4-26 Style Files: One Style, Many Pages Take the style information out of the page and make a separate style file –Create a.css file, like myStyle.css –Put only the specifications from between the … tags in the style file –Put a tag to this style file back into the section of any page needing this style <link type=“text/css” href=“myStyle.css”>

4-27

4-28

4-29 Cascading the Style Sheets Five levels of style information, with precedence – Default, given by browser settings – External, from a style file – Global, in the of one page – Range, given in an enclosing – Site, given by style attribute at one location Closest style wins

Web Authoring HTML and CSS can be generated –Can use WYSIWYG editor like Word, Dreamweaver –Site building tools like on iPage Not for labs though!

Validation Web pages can be validated –Shows conformance to standard –

4-32 Wrap Up: Web Page Authoring Markup and tags HTML Style with CSS Authoring software