PROGRAMMING THE WORLD WIDE WEB Chapter 2 Introduction to HTML

bulote

浏览: 1311065 次

最近访客更多访客>>

u012363178

songhait

chk141

sharpbai

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1272)

社区版块

存档分类

2012-02 ( 25)
2012-01 ( 145)
2011-12 ( 22)
更多存档...

Chapter 2 Introduction to
HTML
• 2.1 Origins and
Evolution of HTML
• 2.2 Basic Syntax
• 2.3 Standard HTML
Document Structure
• 2.4 Basic Text
Formatting
• 2.5 Images
• 2.6 Hypertext nks
• 2.7 sts
• 2.8 Tables
• 2.9 Frames
• 2.10 Summary
• 2.11 Review
Questions
• 2.12 Exercises

2.1 Origins and Evolution of
HTML
• HTML is derived from the Standard
Generazed Markup Language (SGML),
which is an International Standards
Organization (ISO) standard for describing
text-formatting languages.

2.1 Origins and Evolution of
HTML

2.2 Basic Syntax
• The fundamental elements of HTML are called
tags.
• The syntax of a tag is the tag's name,
surrounded by pointed brackets ( <>).
• Tag names must be written in all lowercase
letters.
• Most tags appear in pairs, an opening tag and a
closing tag. The name of a closing tag is the
name of its corresponding opening tag with a
slash attached to the beginning.

2.2 Basic Syntax
• Whatever appears between a tag and its
closing tag is the content of the tag.
• The content of an HTML document is what
appears on the screen of the browser user;
• It is the information the document is meant
to portray.
• Not all tags can have content.

2.2 Basic Syntax
• Attributes can appear between an opening tag's
name and its right bracket. Attributes are used to
specify alternative meanings of the tag.
This is <i> extremely </i> simple
• These tags are properly nested. Improperly
nested tags usually confuse the browser, and
the results can be unpredictable.
<b><i>…</b></i>

2.2 Basic Syntax
• Comments in programs increase the readabity
of programs. Comments in HTML have the same
purpose. They can appear in HTML in this form:

• Browsers ignore HTML comments—they are for
people only.
• Besides comments, several kinds of text may
appear in an HTML document that are ignored
by browsers. Browsers ignore all unrecognized
tags. They also ignore normal ne breaks. The
same is true for multiple spaces and tabs.

2.3 Standard HTML
Document Structure
• Every HTML document requires four tags,
<html>, <head>, <title>, and <body>.
• HTML documents consist of two parts, the head
and the body.
– The head of a document provides information about
the document rather than its content.
– The content of the body tag is the content of the
document, along with the tags that tell the browser
something about how to display that content.
• The text between the <title> and </title> tags is
displayed by the browser at the top of its display
window, usually in the browser's window title bar.

2.3 Standard HTML
Document Structure
• Technically, every HTML document must
have an SGML DOCTYPE command,
which specifies the precise SGML
document type definition with which the
document compes.
<!DOCTYPE html
PUBC "-//w3c//DTD XHTML 1.0
Transitional//EN" "DTD/xhtml1-
transitional.dtd">

2.3 Standard HTML
Document Structure
• Because the DOCTYPE command can
confuse some browsers, it is rarely
included in HTML documents. Accordingly,
we will not include it in any of our
examples.
• Example 1 ch2_1.htm

2.4.1 TEXT WTHOUT TAGS
• Section 2.4.1
• Notice that multiple spaces in the HTML
document are replaced by single spaces.

2.4.2 PARAGRAPHS AND
NE BREAKS
• Because browsers ignore ne breaks in
text, if you want a ne break or blank ne,
a tag must be used. The two ways of
controlng nes in text are the para-graph
and ne break tags, <p> and <br />,
respectively.

2.4.3 HEADINGS
• In HTML, there are six levels of headings, specified by
the tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>,
where <h1> specifies the largest heading.
• Headings are displayed in a boldface font whose size
depends on the number in the heading tag.
• On most browsers, <h1>, <h2>, and <h3> use font sizes
that are larger than that of the regular text;
• <h4> uses the same size;
• and <h5> and <h6> use smaller sizes.
• Browsers insert some vertical space before and after all
headings.
• Example 2 Ch2_2.html

2.4.4 BLOCKQUOTES
• Sometimes you want a block of text to be
set off from the normal flow of text in a
document. In many cases, such a block is
a long quotation. The <blockquote> tag
provides a way of specifying a block of text
that you want to have displayed differently.
• Blockquote.html

2.4.5 FONT STYLES AND
SIZES
• The simplest of these are <b> and <i>,
which change the font style to boldface
and itac, respectively.
• The <big> and <small> tags provide the
means to specify relative sizes of the
characters in text.
• Big.html

2.4.5 FONT STYLES AND
SIZES
• Subscript and superscript characters can
be specified by the <sub> and <sup> tags,
respectively.
• SubSupScript.html

2.4.5 FONT STYLES AND
SIZES
• If you want some text to appear in a
monospace font, such as Courier, use the
<tt> and </tt> tags,.
• tt.html

2.4.6 HORIZONTAL RULES
• The different parts of a document can be
deneated, making the document eas-ier
to read, by placing horizontal nes
between the parts. Such nes are called
horizontal rules, and the tag that creates
them is <hr />.
• Hr.html

2.5.1 IMAGE FORMATS
• Although images can be digitally stored in
several different formats, we deal with only
the two most common of these.
– Graphic Interchange Format ( GIF)
– Joint Photographic Experts Group ( JPEG)
• Most contemporary browsers can render
images in either of these two formats.
Files in both of these are com-pressed to
provide faster transfer over the Internet.

2.5.1 IMAGE FORMATS
• The GIF format was developed for the
specific purpose of moving images for the
CompuServe network service provider. It
uses 8-bit color representations for pixels,
allowing a pixel to have 256 different
colors.
• The JPEG format uses 24-bit color
representations, which allows it to
repre-sent more than 16 milon different
colors.

2.5.2 THE <img /> TAG
• The <img /> tag specifies an image that is
to appear in a document. In its simplest
form, <img /> takes a single attribute, src,
which specifies the file containing the
image. If the file is in the same directory as
the HTML file of the document, just the
image's file name is required as the value
of src.
<img src = "images/stars.jpg" />
• Sample ch2_4.html

2.5.3 THE alt ATTRIBUTE
• There are still some browsers in use that
are not graphical. These browsers cannot
display images.
– ignores its content
– downloading disabled
• The alt attribute of <img /> is used to
specify the text that will replace an image
when it is not displayed.

2.6 Hypertext nks
• A hypertext nk, which we simply call a nk here,
acts as a pointer in an HTML document to some
resource. That resource can be an HTML
document anywhere on the Web, or it may just
be another place in the document currently
being displayed. It could also be a specific place
(rather than the top) in some other document.
• Without nks.,Web documents would be pretty
boring.
• nks are essential to building any kind of
interesting Web site.

2.6.1 NKS
• nks can include images in their content,
in which case the browser displays the
image with the nk:
<a href = "c210data.html " >
<img src = "small-airplane.jpg">
Information on the cessna 210 </a>
• Example ch2_5.html

2.6.1 NKS
• A nk that points to a different document
includes the URL of that document.
• All nks are specified in an attribute of an
<a> tag. A document that includes an <a>
tag that specifies a nk is called the source
of that nk.
• For creating nks, only one is required,
href (an acronym for hypertext reference).
• Example ch2_5.html

2.6.2 TARGETS WITHIN
DOCUMENTS
• If the target of a nk is not at the beginning
of a document, the target can be set using
the id attribute, which can be included in
many different tags. Take a look at this
example:
<h2 id = "avionics"> Avionics </h2>
• The value of an id attribute must be unique
within the document.

2.6.2 TARGETS WITHIN
DOCUMENTS
• If the target is in the same document as the nk,
the target is specified in the href attribute value
by preceding the id value with a pound sign (#),
as in this example:
<a href = "#avionics"> What about avionics? <a/>
• When the target is a part or fragment of another
document, the name of the part is specified on
the end of the URL, separated by a pound sign
(#), as in this example:
<a href = "AIDAN1.html#avionics "> Avionics </a>

2.6.3 USING NKS
• The most common use of nks to parts of
the same document is to provide a table of
contents, in which each entry has a nk,
which makes it easy for the user to get to
the various parts of the document simply
and quickly.
• Inne nks, the only kind discussed in this
chapter, exempfy the true spirit of
hypertext.

2.7 sts
• HTML provides simple and effective ways
to create sts in Web documents.
– Unordered sts
– Ordered sts

2.7.1 UNORDERED STS
• The <ul> tag creates an unordered st.
Each item in a st is specified with an <>
tag.
• Unordered.html

2.7.2 ORDERED STS
• An ordered st is defined within the <ol>
tag.
• ordered.html
• As noted earer, sts can be nested.
• Nested_sts.htm

2.7.3 DEFINITION STS
• As their name impes, definition sts are
used for glossaries and other sts of terms.
A definition st is given as the content of a
<dl> tag.
• Each term to be defined in the definition
st is given as the content of a <dt> tag.
The term definitions themselves are given
as the content of <dd> tags.
• Definition.html

2.8 Tables
• Tables are common fixtures in printed
documents, books, and, of course, Web
documents. Tables provide a highly readable
way of presenting information that naturally
occurs in tabular form.
• A table is a matrix of rows and columns, each
position in which is called a cell
. Some of the
cells contain column
or row
labels; the rest
contain the information, or data, of the table.
• The information in a cell can be almost any
document element, including text, headings,
horizontal rules, images, and nested tables.

2.8.1 BASIC TABLE TAGS
• A table is specified as the content of a < table>
tag. The most common attribute for the < table>
tag is border.
• The browser has a default width for table
borders, which is used if the border attribute is
assigned the value "border". Otherwise, a
number can be given as border's value, which
specifies the border width in pixels.
• In most cases, the actual table is preceded by a
title, which is given as the content of the
<caption> tag. The contents of a table are
specified in HTML one row at a time.

2.8.1 BASIC TABLE TAGS
• Tables usually have column labels and row
labels. The first row of a table is its column
labels.
• Each row of a table is specified with a row tag,
<tr>.
• Within each row, the row label is specified by the
table heading tag, <th>.
<
tr
>
<
th
> Apple</
th
>
<
th
> Orange </
th
>
<
th
> Screwdriver </
th
>
</
tr
>

2.8.1 BASIC TABLE TAGS
• Each data cell of a row is specified with the table
data tag, <td>.
• The data rows of a table are specified with one
heading tag and one data tag for each data
column.
<
tr
>
<
th
>Breakfast </
th
>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</
tr
>

2.8.1 BASIC TABLE TAGS
• In tables that have both row and column
labels, the upper-left corner cell is often
empty. This empty cell is specified with a
table header tag that includes no content
(either <th></th> or <th />).
• Example table.html

2.8.1 BASIC TABLE TAGS
• In many cases, tables have multiple levels
of row or column labels, in which one label
covers two or more secondary labels.
• Multiple-level labels can be specified in
HTML using the rowspan and colspan
attributes.
• Example multiple.html cell_span.html

2.8.1 BASIC TABLE TAGS
• The placement of the content within the
cell can be specified with the agn
and
vagn
attributes in the <tr>, <th>, and
<td> tags.
• The agn attribute has the possible values
left, right, and center, with the obvious
meanings for horizontal placement of the
content within a cell.
• The default agnment for headers is
center; for data it is left.

2.8.1 BASIC TABLE TAGS
• If agn is specified in a
<tr> tag, it appes
to all cells in the row. If it is in a <th> or
<td> tag, it appes to only that cell.
• The vagn
attribute of the <th> and <td>
tags has the possible values top and
bottom. The default vertical agnment for
both headings and data is center. Because
vagn appes only to a single cell, there is
never any point in specifying center.
• Example cell_agn.html

2.9 Frames
• The browser display window can be used
to display more than one document at a
time. The window can be divided up into
rectangular areas, each of which is a
frame. Each frame is capable of displaying
its own document. Frames can be used for
a number of different display situations.

2.9 Frames
• The number of frames and their layout in
the browser window are specified with the
<frameset> tag.
• A frameset element takes the place of the
body element in a document. A document
has either a body or a frameset, but it
cannot have both.

2.9 Frames
• The <frameset> tag must have either a
rows
or a cols
attribute, and often has
both.
• The rows attribute specifies the number of
rows of frames that will occupy the window.
There are three kinds of values for rows:
– Numbers
– Percentages
– Asterisks
For Example frames.html

2.9 Frames
• If no cols attribute was included, the
frames extend over the entire width of the
window.
• The content of a frame is specified as the
value of the src
attribute in the <frame>
tag—for example:
<frame src = "apples.html">
• If a <frame> tag has no src attribute, the
browser displays an empty frame.

2.9 Frames
• If the content of a frame does not fit into the
given frame, scrollbars are impcitly included. If
you want a frame to have scrollbars, regardless
of the size of its content, the < frame> attribute
scrolng
can be set to "yes".
• If a <frame> tag includes a name
attribute, the
content of its associated frame can be changed
by the selection of a nk in some other frame
that spec-ifies that name.
For example ch2_16.html

2.10 Summary
• HTML’S EVOLUTION
• Tags of HTML

2.12 Exercises
• Page 61-62

• <META>
• 提供有关该文档的媒体信息，比如该文档
的作者的姓名，文档在缓存内过期的时
间，和为搜索引擎而做的描述说明和关键
字。同样用于实现cent-pull功能。
– NAME=”value”
– CONTENT=”value”
– HTTP-EQUIV=”value”

• 文档作者姓名：
• <META NAME=”author”
CONTENT=”creator of web site”>
• 文档过期时间：
• <META HTTP-EQUIV=”Expires”
CONTENT=”Wed,01 Jan 2000
00:00:00 GMT”>

• 为搜索引擎所做的描述：
• <META NAME=”DESCRIPTION”
CONTENT=”trading card web site”>
• 为搜索引擎所设定的关键字：
• <META NAME=”KEYWORD”
CONTENT=”trading cards,cards,buy”>
• 使用cent-pull技术在5秒后重载该网页：
• <META HTTP-EQUIV=”REFRESH”
CONTENT=”5;http://website/newpage.cfm”
>

链接
• 在新窗口中打开链接基本语法
• 链接标识符<a>有3个属性
– herf链接所指向的文件的地址
– name引用锚点的名称
– target打开链接的目标窗口
• target=_parent 父窗口
• target=_blank　新窗口
• target=_self　本窗口
• target=_top　整个浏览器窗口
• Example7.html

图像
• 客户端图像映射图
所谓映射图，是指图象中有些区域为可单击
的“热点”。
<img src=URL usemap=“map-name”>
<map name=“map-name”>
<area shap=“#” coords=“#” href=“url”>
示例

图像
• 2.7.5使用图片的小技巧
可将较大的图像分割成几幅小图片

2.11 嵌入多媒体文件
<head>
<emed src=“…”>
</head>
• 可以在主页中嵌入的多媒体文件类型有
– Graphic
– Movie
– Sound
– VRML

2.11 嵌入多媒体文件
• 标签<embed>有以下属性
– src:多媒体文件的URL
– height:浏览对象高度
– width:浏览对象宽度
– pallette:编辑被标识对象时的前景色或背景色

2.11 嵌入多媒体文件
• 2.11.1嵌入声音文件
<bgsound src=“…”>
Src一般使用wav或MIDI文件
<bgsound loop=“…”>
loop是循环播放次数
示例

2.11 嵌入多媒体文件
• 2.11.2嵌入电影文件示例
<img src=“url.gif” dynsrc=“url.avi”>
• 属性
– start开始播放的时间
• fileopen
• Mouseover
– controls在播放电影剪辑加入控制条
– loop循环次数
• infinite
– loopdelay:循环延时

2.12 Marquee:移动的文字
• 2.12.1基本语法
<marquee>…</marquee>

2.12 Marquee:移动的文字
• 2.12.2设置文字移动的方式
• 移动属性
– direction移动方向scroll, sde, alternate
– behavior移动方式
– loop循环次数
– scrollamount移动速度
– scrolldelay移动延时(毫秒)
• 示例

2.12 Marquee:移动的文字
• 2.12.3设置移动文字的外观
• 外观的属性
– agn可选项 top, middle, bottom
– bgcolor
– height
– width
– hspace
– vspace

<frameset> TAG
• The ROWS
and COLS
attributes define
the dimensions of each frame in the set.
Each attribute takes a comma-separated
st of lengths, specified in pixels, as a
percentage, or as a relative length. A
relative length is expressed as i
*
where i
is
an integer. For example, a frameset
defined with ROWS="3
*
,
*
"
(*
is equivalent
to 1
*
) will have its first row allotted three
times the height of the second row.