31
Chapter 4 HTML

Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Embed Size (px)

Citation preview

Page 1: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Chapter 4HTML

Page 2: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Objectives

• Explain how HTML/XHTML are used and describe the difference between them

• Interpret HTML code• Explain how HTML Forms are used in web

applications• Interpret HTML Forms• Explain the purpose Cascading Style Sheets

(CSS)• Describe the different formats for CSS code• Interpret CSS code

Page 3: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

HTML

• HyperText Markup Language (HTML) is the language for writing web pages

• HTML/4 is the current version

• HTML/4 versions include– strict: strictly enforces syntax rules– traditional: allows informally accepted syntax– frameset: allows the use of HTML frames

Page 4: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

XHTML

• XHTML is HTML expressed as an XML document

• Compared to HTML– XHTML has a more rigorous syntax, which is

more machine-readable– XHTML contains more meta-information, i.e.,

information about the HTML document

Page 5: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

HTML Syntax

• Each HTML element is defined by a tag, or pair of tags– tags are delimited by angle brackets: < >– tags may include attributes( name=“value” )

• Paired tags have content– e.g., paragraph: <p>Hello!</p>

• Empty tags contain nothing– e.g., <br />, <img src=“ball.jpg” alt=“Ball” />

Page 6: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Sample Web Page

Page 7: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

XHTML Headings

• XHTML documents start in this form(version XHTML/1-strict)

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

define XML version

define XML documenttype

startHTMLdocument

Page 8: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

<head> element

• The first element of an HTML document is the <head> element– defines a document title, among other things– document title appears in the browser title bar

<head> <title>Eastern Hills Soccer League</title></head>

Page 9: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Headings and Paragraphs

<h1>Eastern Hills Soccer League</h1>

<hr />

<p><img src="SoccerBall.jpg" alt="Soccer Ball"/></p>

<p><strong>EHSL Mission:</strong> to serve allchildren in the Hills area by providing anopportunity for them to grow up healthy, happy, andstrong through participation in the world's greatestcompetitive sport.</p>

heading, level1(1-6 available )

horizontal rule

image

paragraph (text)

Page 10: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Lists

• <ul> unordered (bullet) list

• <ol> ordered (numbered) list

• <li> list item

<ul> <li> <a href="standings.html">Current Team

Standings</a></li> <li><a href="matches.html">This Week's Matches</a></li> <li><a href="mailto:[email protected]">Contact Us</a></li></ul>

Page 11: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Hyperlinks

• Hyperlinks take the browser to other documents when clicked

• Format:<a href=“ …url … “> …link text… </a>

– e.g., <a href="standings.html">Current Team Standings</a>

Page 12: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Tables

• An HTML table presents data in a grid format

<table border=“1”> <caption>Table Caption</caption> <tbody> <tr> <td>R1,C1</td> <td>R1,C2</td> <td>R1,C3</td> </tr> <tr> <td>R2,C1</td> <td>R2,C2</td> <td>R2,C3</td> </tr> </tbody></table>

R1,C1 R1,C2 R1,C3

R2,C1 R2,C2 R2,C3

Table Caption

Page 13: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

HTML Forms

• An HTML Form presents a fill-in form for entering data

• Form controls include– text box, text area, and password box– check box– radio buttons– drop-down menus– submit buttons

Page 14: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Form tag

Page 15: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Text and Passwords

Page 16: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Check-box and Radio-Buttons

Page 17: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Drop-Down Menus

Page 18: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Submit Buttons

Page 19: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

CSS

• Cascading Style Sheets is a technique for changing the appearance, or style, of web page elements

• Style may be defined in three ways:– in-line: along with an HTML

element– internal style sheet: within an HTML document– external style sheet:outside of an HTML document

Page 20: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Style Elements

• The “style” of an element can include many visible attributes:– Color– Size– Font– Alignment– Decoration (underline, bold, etc.)– etc.

Page 21: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Style Definition

• Style attributes are defined as a set of “name: value” pairs, separated by “;”

color: red; background: blue; align: left

• Each HTML element has its own set of relevant style attributes

Page 22: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

In-Line Style

• In-line style is defined using the “style” attribute of an HTML element

<p style=“color: blue; text-align: center”>This paragraph is centered in blue</p>

This paragraph is centered in blue

Page 23: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Internal Style Sheet

• An internal style sheet is defined in the heading of an HTML document– Delimited by <style type=“text/css”>…</style>

<head> <title>...</title> <style type=“text/css”> p { color: blue; text-align: center } </style></head>

Page 24: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Internal Style Sheet

• An internal style sheet consists of a set of descriptors

• Each descriptor defines the style for one HTML element

• Descriptor format:

h1 { text-align: center; color: brown }

selector declaration block

property name / value

Page 25: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Internal Style Sheet

h1 { text-align: center; color: brown }

• The selector identifies one or more HTML elements to which the rule applies– multiple elements are comma-separated

• Property values in the declaration block apply to each instance of the selected HTML element(s)

selector declaration blockproperty name / value

Page 26: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Selectors

• Descriptors starting with "." define classes that can be referenced in document elements using the class attribute

.number { text-align: right }

<p class="number">1234</p>

Page 27: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Selectors

• Descriptors may also identify established psuedoclasses– e.g., a:hover is applied to hyperlinks only

while under the cursor

a:hover { background: white }

Page 28: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Internal Style Sheet Example

<head> <title>...</title> <style> h1 { color: brown; background-color: lightgray; border: solid gray; text-align:center; padding: .5em; } .strong { font-weight: bold; } .quote { margin-left: 1em; margin-right: 1em; } li { padding-top: 1ex; } a:hover { background-color: lightgray; } </style></head>

Page 29: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

External Style Sheet

• An external style sheet has the same format as an internal style sheet, but is stored in a separate document

• It is imported into a document with a <link> tag

<head> ... <link rel="stylesheet" type="text/css"

ref="styles/style-1.css"></head>

Page 30: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

CSS - Precedence

• When conflicting style attributes apply to an element, the closest one takes precedence

ExternalStyleSheet Internal

StyleSheet In-line

StyleAttribute

HTMLElement

Page 31: Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used

Review

• HTML

• XHTML

• HTML Forms

• Cascading Style Sheets

• In-line, internal, and external style sheets