Understanding HTML Image Tags and Attributes

Slide Note

Delve into the world of HTML image tags and attributes with this detailed overview. Learn how to display images, make them clickable links, adjust image sizes, and utilize various attributes for styling and alignment. Discover the differences between image formats such as GIF and JPEG, and master the art of incorporating images seamlessly into your HTML documents.

kelsie Follow

Uploaded on Aug 28, 2024 | 1 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Lecture 6 HTML Primer (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 4-2

Clickable Pictures Pictures can be used as links <a href="fullsize.jpg"> <img src="thumbnail.jpg"/> </a> Anchor text is thumbnail image 4-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-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" /> 4-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 > 4-6

4-7

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

Attributes for Image Tags 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 /> 4-9

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 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>. <span> groups content for styling

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

4-14

4-15

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

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, 1 2. Helium, He, 4.003, 2 Good for balloons Makes you talk funny 3. Lithium, Li, 6.941, 2 1 4. Beryllium, Be, 9.012, 2 2 4-17

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

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

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-20

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

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-22

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

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> 4-24

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-25

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-26

4-27

4-28

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 4-29