13
xhtml is “v5.0” An HTML v4.1 Primer chapter4

Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements Table 4.1 > html elements — container elements — text -- open tag, close tag

Embed Size (px)

Citation preview

Page 1: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

xhtml is “v5.0”

An HTML v4.1 Primer

chapter4

Page 2: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

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>

Page 3: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

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>

Page 4: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

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”> …

Page 5: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

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>&nbsp;

Page 6: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

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>

Page 7: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

Slide 4-7

Inline Images

<img src=“pipe.jpg” width=“250” height=“150” alt=“pipe.jpg” >

(eg) ski.html.gif, .jpg, .png image formats

Page 8: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

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

Page 9: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

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

Page 10: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

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

Page 11: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

Slide 4-11

HANDLING LISTS

W3Schools: HTML Lists

Page 12: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

Slide 4-12

HANDLING TABLES

W3Schools: Tables

Page 13: Xhtml is “v5.0” An HTML v4.1 Primer chapter 4. Slide 4-2 HTML Elements  Table 4.1 > html elements — container elements — text -- open tag, close tag

Slide 4-13

Next:XHTML ?=? HTML v5.0

W3Schools: XHTML