1 / 32

Showing Pictures: The Image Tags

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 <a href ="fullsize.jpg"> < img src ="thumbnail.jpg "/>

liana
Download Presentation

Showing Pictures: The Image Tags

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Showing Pictures: The Image Tags Image Tag Format <imgsrc="filename" alt=“description" /> srcshort for source alt for text Can use absolute or relative pathname

  2. “Clickable” Pictures Pictures can be used as links <a href="fullsize.jpg"> <imgsrc="thumbnail.jpg"/> </a> Anchor “text” is thumbnail image

  3. 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. 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" />

  5. 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”>

  6. Attributes for Image Tags Displayed image size can be adjusted <imgsrc=“puffer.jpg” width=“200” height=“200” /> Scales to 200x200pixels 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

  7. Browser will happily distort image (original is 2400x2400) <imgsrc=“puffer.jpg” width=“200” height=“200” /> <imgsrc=“puffer.jpg” width=“200” height=“100” /> <imgsrc=“puffer.jpg” width=“100” height=“200” /> Attributes for Image Tags

  8. 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

  9. Styling Position for Images • Make text flow aroundan image with style attribute • <imgsrc=“file” style="float:left” /> • Image with no surrounding text • <p> <imgsrc=“file” /> </p>

  10. 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>.

  11. 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

  12. Handling Lists Unordered(bulleted) list <ul> and </ul> <li> and </il> Ordered (numbered) list <ol> and </ol> Uses same <li> tags Sublistspossible Definitionallist: <dl> and </dl> tags <dt> and </dt> for terms <dd> and </dd> for definitions (indented)

  13. 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) 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

  14. 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

  15. 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 C Dan Jen Pat Mary Tim Bob Other examples in textbook

  16. 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

  17. 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?

  18. 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>

  19. 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

  20. Adding Class to Style We 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>

  21. 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>

  22. Style Files: One Style, Many Pages Take the style information out of the page <head> and make a separate style file Create a .cssfile, 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”>

  23. 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

  24. 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!

  25. Validation • Web pages can be validated • Shows conformance to standard • http://validator.w3.org/

  26. Wrap Up: Web Page Authoring Markup and tags HTML Style with CSS Authoring software

More Related