Embed Size (px)
DESCRIPTION
HTML, Part 2. Showing Pictures: The Image Tags. Image Tag Format < img src =" filename " alt=“ description " /> src short for source alt for text Can use absolute or relative pathname. “Clickable” Pictures. Pictures can be used as links - PowerPoint PPT Presentation
Citation preview
HTML, Part 2
4-2
Showing Pictures: The Image Tags
• Image Tag Format
<img src="filename" alt=“description" />– src short for source
– alt for text
– Can use absolute or relative pathname
4-3
“Clickable” Pictures
• Pictures can be used as links
<a href="fullsize.jpg"> <img src="thumbnail.jpg"/></a>
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
– <tag attr=“value”> • Text alignment (justification) is specified using
attributes
<p align="center">(default justification is left)
• Horizontal rule attributes<hr width="50%" size="3" />
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 …)
<body style=“background-color: black; color: green”>
<h1 style=“text-align: center; color: yellow; font-family: arial”>
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)<img src=“puffer.jpg” width=“200” height=“200” /><img src=“puffer.jpg” width=“200” height=“100” /><img src=“puffer.jpg” width=“100” height=“200” />
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– <img src=“file” style="float:left” />
• Image with no surrounding text– <p> <img src=“file” /> </p>
Span
• <span> groups content for styling
My favorite fonts are <span style="font-family :helvetica">Helvetica</span>,
<span style="font-family :century gothic">Century Gothic</span>, and
<span style="font-family : bodoni">Bodoni</span>.
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
– <ul> and </ul>– <li> and </il>
• Ordered (numbered) list– <ol> and </ol>– Uses same <li> tags
• Sublists possible• Definitional list:
– <dl> and </dl> tags– <dt> and </dt> for terms– <dd> and </dd> for definitions (indented)
4-17
Example (Nested Lists)<ol> <li> Hydrogen, H, 1.008, 1 </li> <li> Helium, He, 4.003, 2 </li> <ul> <li> good for balloons </li> <li> makes you talk funny </li>
</ul> <li> Lithium, Li, 6.941, 2 1 </li> <li> Beryllium, Be, 9.012, 2 2 </li> </ol>
Gets rendered as (browser indents each list some)1. Hydrogen, H, 1.008, 12. Helium, He, 4.003, 2
• Good for balloons• Makes you talk funny
3. Lithium, Li, 6.941, 2 14. Beryllium, Be, 9.012, 2 2
4-18
Handling Tables• Tables use <table> and </table> tags• For rows use <tr> and </tr>• For cells use <td> and </td>• Caption at top of table
– <caption> and </caption> tags
• Column headings set up in first row– Use <th> and </th> tags instead of table data
tags
4-19
Example Simple Table<table> <tr><th>A</th><th>B</th><th>C</th></tr> <tr><td>Dan</td><td>Jen</td><td>Pat</td></tr> <tr><td>Mary</td><td>Tim</td><td>Bob</td></tr></table>
Will display as
A B CDan Jen PatMary 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:
<h2 style=“color:red; font-family:arial”>
• How to do?
4-22
Setting Global Style• Inside <head> tags, make a global style using
<style> … </style> tags<style type=“text/css”> h2 { color: red; font-family: arial }</style>
• Another example: tables and elements<style type=“text/css”> 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}</style>
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<td style=“background-color: tan”> Bob
</td>
• In style, closest wins
4-24
Adding Class to StyleWe can create different style collections, called
classes (below uses “sum” and “fall”)<style type=“text/css”> 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}</style>
4-25
Using Style Classes Now use class names in tags to apply the style
selectively
<table class=“sum”> <tr><th class=“sum”> ...</table>
<table class=“fall”> <tr><th class=“fall”> ...</table>
4-26
Style Files: One Style, Many Pages
• Take the style information out of the page <head> and make a separate style file– Create a .css file, like myStyle.css – Put only the specifications from between the
<style>…</style> tags in the style file– Put a <link> tag to this style file back into the
<head> 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 <head> of one page– Range, given in an enclosing <tag>– 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
– http://validator.w3.org/
4-32
Wrap Up: Web Page Authoring• Markup and tags
• HTML
• Style with CSS
• Authoring software
