Embed Size (px)
Citation preview
xhtml is “v5.0”
An HTML v4.1 Primer
chapter4
Slide 4-2
HTML Elements Table 4.1
> html elements— container elements— <h2> text </h2> -- open tag, close
tag
— empty elements — <hr> --no close tag
> Elements for Bold and Italic (deprecated)— <b> .. </b>— <i> .. </i>
Slide 4-3
web page structure
<html>
<head><title>I’d rather be ..</title>
</head>
<body>
<h1> I’d rather be ...</h1>
<h2> … skiing!!! </h2>
<hr>
<img src="ski.jpg">
</body>
</html>
Slide 4-4
STRUCTURING DOCUMENTS
> Headings in HTML— h1, h2, …, h6
> HTML Format vs. Display Format: White Space
> Attributes in HTML— <p align=“center”> … </p>
— <body text=“navy” bgcolor=“ivory”> …
Slide 4-5
white space in html
<h3>White Space in HTML</h3> Any sequence of white-space characters
is rendered as a single space. <br> For example, here is one space:
and here are five spaces: How are they rendered by your browser?
Solutions: <pre> .. </pre>
Slide 4-6
MARKING LINKS WITH ANCHOR TAGS
> Two Sides of a Link— href + anchor text
> Absolute Pathnames (URLs)— <a href=http://www.uoregon.edu> UO
</a>
> Relative Pathnames— <a href=“contact.html”> Contact Info
</a>
Slide 4-7
Inline Images
<img src=“pipe.jpg” width=“250” height=“150” alt=“pipe.jpg” >
(eg) ski.html.gif, .jpg, .png image formats
Slide 4-8
Inline Images: Alignment
<img src=“jwocky.jpg” width=“250” height=“150” alt=“jabberwocky.jpg” >
Attribute: alignValues for wrapping text around images:
left, right (but no center)
align=“left” image aligns to the left, text flows around the right side of the image
align=“right” image aligns to the right, text flows around the left side of the image
Slide 4-9
Inline Images: Alignment
> Jabberwocky w/image & text wrap
> Jabberwocky in Wikipedia
> Jabberwocky in Klingon
> Other Translations
align attribute is deprecated in html 4.01 use CSS float attribute
Slide 4-10
HANDLING COLOR
Colors by Name (140 ttl) or Number
> CSS Standard Color names (16)
> extended color names (124)— introduced by Netscape & supported by
all modern browsers
> hex triples: chartreuse = #7FFF00
beige #F5F5DC
Slide 4-11
HANDLING LISTS
W3Schools: HTML Lists
Slide 4-12
HANDLING TABLES
W3Schools: Tables
Slide 4-13
Next:XHTML ?=? HTML v5.0
W3Schools: XHTML
