HTML Image Tags and Attributes
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
•
U
nordered
(bulleted)
l
ist
–
<ul> and </ul>
–
<li> and </il>
•
O
rdered
(numbered)
l
ist
–
<ol> and </ol>
–
Uses same <li> tags
•
Sublists possible
•
D
efinitional
l
ist:
–
<dl> and </dl> tags
–
<dt> and </dt> for terms
–
<dd> and </dd> for
d
efinitions (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, 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-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
h
eadings 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 C
Dan Jen Pat
Mary Tim Bob
Other examples in textbook
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 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-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
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.
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
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
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
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
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/
Wrap Up: Web Page Authoring Markup and tags HTML Style with CSS Authoring software 4-32
