HTML与CSS：构建有效网页的视觉蓝图

需积分: 9 93 浏览量更新于2024-07-23 1 收藏 32.45MB PDF 举报

"HTML-Your-Visual-Blueprint-for-Designing-Web-Pages-with-HTML-CSS-and-XHTML" 是一本由Rob Huddleston编写的关于网页设计的指南，主要聚焦于HTML、XHTML和CSS这三种技术。本书提供了一个视觉上的蓝图，帮助读者有效地设计和构建网页。在书中，作者深入浅出地介绍了HTML（HyperText Markup Language），这是一种用于创建网页的标准标记语言。HTML是网页结构的基础，通过使用各种标签来定义文本、图像、链接等元素的布局和功能。读者将学习如何使用HTML创建和组织网页内容，包括标题、段落、列表、图像以及表格等元素。 XHTML（Extensible HyperText Markup Language）是HTML的一个更严格的版本，它结合了HTML的易用性和XML（eXtensible Markup Language）的严谨性。XHTML要求代码更加规范，有助于提高网页的跨浏览器兼容性和可读性。书中会教授读者如何编写符合XHTML标准的代码，以确保网页在不同的设备和浏览器上呈现一致。 CSS（Cascading Style Sheets）则负责网页的样式和布局，让设计者能够独立于内容来控制页面的显示效果。通过CSS，你可以改变字体、颜色、布局、响应式设计等方面，从而实现更美观和高效的网页设计。书中的内容将涵盖选择器、属性、值以及CSS规则的编写，帮助读者掌握如何通过CSS实现网页的个性化设计。此外，书中可能还涉及了实际的网页设计流程，包括如何规划网页布局，使用浮动、定位和Flexbox或Grid布局，以及如何处理响应式设计，使网页适应不同尺寸的屏幕。作者也可能讨论了调试和优化网页，以提升用户体验的方法。值得注意的是，出版商和作者明确声明，尽管本书提供了丰富的信息，但并不保证所有内容的准确性和完整性，也不对因使用本书内容可能导致的任何后果承担责任。建议读者在遇到专业问题时寻求相应领域的专业人士的帮助。 "HTML-Your-Visual-Blueprint-for-Designing-Web-Pages-with-HTML-CSS-and-XHTML" 是一个适合初学者和有一定经验的网页设计师的宝贵资源，通过这本书，读者可以系统地学习并掌握创建和美化网页所需的技能。

xiii

form controls for improved usability, and discusses

strategies for processing the form data.

Chapter 12, “Working with JavaScript,” teaches you how

to implement the powerful scripting language into your

sites. It shows how to add JavaScript to your pages, and

use it to validate forms, open new windows, hide and

display page contents, and swap images. It also shows

how to debug JavaScript errors.

Chapter 13, “Making Your Site Accessible,” discusses how

to ensure that all users, including those with disabilities,

can access the information on your site. After introducing

the concepts behind Web accessibility, it shows how to

make tables, images, forms, and site navigation accessible,

and how to test for accessibility.

Chapter 14, “Adding Specialized Markup,” shows how to

add special characters to your pages, how to add

addresses, and use quoted text, abbreviations and

acronyms, and code samples on your page.

Chapter 15, “Creating an RSS Feed,” includes an

introduction to XML and RSS, and shows how to create a

feed so that other sites can subscribe to yours and display

selected information on their pages.

Chapter 16, “Using Content from Other Sources,” shows

how to create a blog and use it on your site, display RSS

from other sites, show pictures from Flickr, maps and

calendars from Google, advertising, social bookmarks, and

search boxes.

Chapter 17, “Getting Your Site Listed on Search Engines,”

covers topics that show how to best ensure that your page

will appear in popular search engine results, including

using meta elements data and the Google Web master

tools. It also shows how to prevent search engines from

cataloging pages.

Chapter 18, “Testing and Validating Web Pages,” teaches

how to look for and avoid common HTML, XHTML, and

CSS mistakes, and introduces tools you can use to check

your pages for these errors.

Chapter 19, “Publishing Your Site,” shows how to sign up

with a Web host, buy a domain name, and upload your

site to a Web server.

Appendix A is a complete XHTML reference.

Appendix B is a CSS reference.

Appendix C is a Web accessibility reference.

What You Need to Use This Book

To perform the tasks in this book, you will need a

computer with a Web browser such as Microsoft Internet

Explorer or Mozilla Firefox and a text editor. All of the

code examples are written using Notepad, but they can be

successfully completed in any code editor. Several

examples require an active Internet connection to

complete.

The Conventions in This Book

A number of styles have been used throughout HTML,

XHTML, and CSS: Your visual blueprint for designing effective Web

pages to designate different types of information.

Courier Font

Indicates the use of code such as tags or attributes,

scripting language code such as statements, operators, or

functions, and code such as objects, methods, or

properties.

Bold

Indicates information that you must type.

Italics

Indicates a new term.

An Apply It section takes the code from the preceding task

one step further. Apply It sections allow you to take full

advantage of HTML, XHMTL, and CSS.

An Extra section provides additional information about the

preceding task. Extra sections contain the inside

information to make working with HTML, XHMTL, and

CSS easier and more efficient.

What’s on the Web Site

The accompanying Web site, www.html2008vb, contains

the sample files for HTML, XHTML, and CSS: Your visual

blueprint for designing effective Web pages.

03_274361-flast.qxp 4/17/08 2:54 PM Page xiii

Introducing

HTML

ess than twenty years after its invention, the

World Wide Web has become ubiquitous. Today,

there are tens of billions of Web sites worldwide,

and the number continues to grow at an almost

exponential rate. There are many factors that have

contributed to the growth of the Web, but one of the most

important is that Hypertext Markup Language (HTML),

the language in which Web pages are written, is easy to

learn, and best of all, free.

Versions of HTML

HTML went through several iterations in the early days when

only a few people, mostly at universities, were using it.

Berners-Lee first publically promoted the concept of HTML

online in 1991, but it was not until 1993 that the Internet

Engineering Task Force formally adopted an HTML

specification as a “working draft.” Two years later, they

published the HTML 2.0 specification (note that, technically,

there was never an HTML version 1.0).

HTML 3.0 was proposed in 1995, but was deemed too complex

for implementation by browsers. It was fairly quickly

supplanted by HTML 3.2, the first truly popular version of the

language. Unfortunately, version 3.2 introduced a host of

browser-specific elements and attributes that had been adopted

by browser manufacturers such as Netscape and Microsoft,

creating challenges for Web designers who wanted to create

pages that would correctly display across multiple browsers.

Realizing that what had begun as a fairly simple text markup

language was fast becoming too complex to manage, the

World Wide Web Consortium (W3C), the body that had been

established to manage the development of future versions of

HTML and other Web-related technologies, released HTML 4

in 1997. This marked an attempt to find a common ground

between the needs of future developers to have an easy-to-

use and easy-to-learn yet robust language while preventing

the then-millions of existing pages from breaking in newer

browsers. The goal of this new version was to encourage Web

designers to move away from the bloated, browser-specific

code they had been forced to write and instead return their

HTML documents to the original ideas of the language; they

would then focus solely on the underlying structure of the

document instead of visual formatting, which would now be

handled by Cascading Style Sheets (CSS), the newly-

developed formatting language of the Web.

History of HTML

The World Wide Web was invented in 1990 by Tim Berners-

Lee. Berners-Lee worked at the European Particle Physics

Laboratory (CERN) in Geneva, and at the time, no one

operating system had come to dominate the market. Therefore,

the visiting scientists at CERN were bringing in their own

computer systems, and despite the fact that they were working

together on cutting-edge technologies, they had no real way to

share their data with one another except on paper.

In the 1960s, scientists at IBM developed the Standard

Generalized Markup Language (SGML), which is a language

for creating other languages. Also in the 1960s, researchers

at Brown and Stanford Universities developed hypertext, a

method of relating similar information.

Berners-Lee developed HTML by combining these two

concepts: He took the idea of hypertext and applied it via

SGML. He also developed the Hypertext Transfer Protocol

(HTTP), which allows networked computers to exchange

HTML documents, and the first browser/editor, which he

called WorldWideWeb, a name later adopted for the entire

system.

The first time Berners-Lee used these new technologies was

on Christmas Day, 1990. It took several years to really catch

on, but by 1995, new companies such as Yahoo! and

Amazon.com were founded, and along with the Netscape

browser, the Web quickly took off from there.

04_274361-ch01.qxp 4/17/08 2:55 PM Page 2

Chapter 1: Introducing HTML and XHTML

HTML Elements and Tags

HTML is made up of

elements

, which describe to the

browser how a particular piece of text should be

treated. Elements are expressed in HTML as tags,

which consist of the element surrounded by angle

brackets, or the greater than and less than symbols.

An example of a tag that uses the

html element is

<html>.

HTML Syntax Rules

While I have already noted that HTML uses a very loose syntax, there are still a few things about which you need to be

aware.

•

HTML is case-insensitive. You can use any case you want for elements, attributes, and attribute values. You can

also freely mix and match cases, but being consistent will make your code easier to read.

•

HTML is whitespace-insensitive. Within tags, the element must immediately follow the opening angle bracket.

After that, however, you can put as much space as you wish, including carriage returns, between the element and

any attributes, between attributes, and before the closing bracket. Outside of tags, you can use any whitespace

characters, again including carriage returns, within your content without affecting the final display in your

browser. Browsers always ignore more than one consecutive whitespace character, and always ignore tabs and

carriage returns.

•

When using attributes, you can enclose the value of the attribute in single or double quotation marks. Some

attribute values need not have quotation marks at all, but it is easier to simply always use them rather than try to

figure out which cases require them and which do not.

The “Flavors” of HTML 4.01

HTML 4 (and the update version 4.01) has three versions.

HTML 4.01 Transitional encourages, but does not require,

designers to move from the presentation-heavy code of

earlier HTML and begin using CSS for formatting. HTML

4.01 Strict requires that only structure-based code be

used, with all formatting handled by CSS. The third, less

commonly-used HTML 4.01 Frameset allows developers

to create pages that utilize frames for page layout.

Container and Empty Tags

Most HTML tags will surround a block of text, thus

marking it up. These tags use elements that describe

both when the markup needs to begin, and when it

ends. For example, if you want to make some text

bold, you need to tell the browser both when to begin

making the text bold and when it should stop doing

so. These

container tags

use an opening tag, which

has the element and the angle brackets, and a

corresponding closing tag, which includes a forward

slash after the opening bracket and before the

element.

Some text to be made bold-

faced

While the majority of tags are containers, there are a

set of tags that essentially represent instructions to

the browser, and thus have no matching closing tag.

For example, while it makes sense that you need to

tell the browser where to begin and end bold text, it

likewise makes sense that you only need to tell the

browser where to place an image — it has no logical

end point, and therefore no closing tag. These are

called

empty tags

, as they do not contain content.

Attributes

There are times when you need to expand on the

information you are providing in a tag. For example, it

is not enough to simply tell the browser that you want

to display an image on the page; you need to tell it

which image to display. This additional information for

tags is given through

attributes

. Attributes appear after

the element but before the final angle bracket in an

opening tag. Attributes consist of the attribute name,

an equal sign, and a value, which will be enclosed in

quotation marks.

Note that attributes are never repeated in the closing

tag, and whenever you use more than one attribute in

a single tag, they can be presented in any order.

04_274361-ch01.qxp 4/17/08 2:55 PM Page 3

Introducing

XHTML 1.0

XHTML Syntax Rules

Although HTML and XHTML share a set of elements, there are several important differences between the

syntaxes of each:

•

XHTML is case-sensitive. All elements and attributes must be lowercase.

•

XHTML requires that attribute values be quoted. You can use single or double quotation marks, but you must always use

them.

•

XHTML requires that all attributes have values. While rare, there are a few scattered examples of HTML attributes that

have no value, and instead use a single word. In XHTML, these must have a value, which is always the name of the

attribute repeated as the value. An example is the input element, used for forms (see Chapter 11 for details). When the

input element is used to create a radio button, and you wish to have the button selected by default, HTML uses the

checked attribute. In XHTML, it is written

checked=”checked”.

•

XHTML requires that tags be properly nested. It is almost always possible to nest tags within other tags. For example,

much of the content on your page will be in paragraphs, which use the

p element. Within a paragraph, you may have text

that you want to be both bold (using the

strong element) and italic (using em). The code in this case would be

Some bold, italic text.. Here, the em tag is nested within the

strong, which is in turn nested within the p. This is the proper XHTML syntax, where the tags close in the opposite order

from which they were opened, and each element is completely nested within the other. HTML would allow for

Some

bold, italic text.

, where the order of the closing tags is reversed.

•

XHTML requires closing tags. As was discussed previously, HTML has container tags that surround marked-up text and

empty tags that merely give an instruction to the browser. In XHTML, even empty tags must be closed. You can either add

the closing tag immediately after the opening, as in

<img src=”images/picture.gif”></img>, or simply add the

forward slash before the closing angle bracket:

<img src=”images/picture.gif” />. Either is allowed, but the

latter is preferred if for no other reason than it takes less code.

The one syntax rule that is the same between HTML and XHTML is that both are whitespace-insensitive.

hile development of HTML continued, the

W3C was also hard at work on another

markup language. The Extensible Markup

Language (XML) was designed to allow developers to

create documents that focused solely on the actual

data of their page, without regard to how such data

might eventually be displayed. XML relies on a much

stricter syntax than HTML. While beginners may find

the loose syntax of HTML easy to learn, languages with

stronger syntaxes are ultimately easier to debug and

manage.

To provide Web designers with the tools they needed to

be better able to troubleshoot pages, the W3C released

Extensible HTML (XHTML) 1.0, ultimately intending that

it replace HTML 4.01. XHTML uses the same set of

elements and tags as HTML, and even includes the same

three “flavors” — Transitional, Strict, and Frameset.

However, it requires that pages be written in the much

stricter XML syntax.

04_274361-ch01.qxp 4/17/08 2:55 PM Page 4

Declaring the XHTML Namespace

Because XHTML documents are technically written in

XML, it is necessary to also define the XHTML

namespace for your document. This is a fairly

technical XML detail, and fully understanding its

purpose is not necessary, especially considering that,

like the DOCTYPE, it will always be the same on every

one of your documents (regardless of which

DOCTYPE you are using). It is added as an attribute to

the first tag in your page, which uses the

html

element:

<html xmlns=” http://www.w3.org/

1999/xhtml>

Chapter 1: Introducing HTML and XHTML

Declaring the “Flavor” of XHTML

Advantages of XHTML

Writing XHTML only requires a small amount of

additional effort beyond writing HTML, and yet it

provides several advantages. First, you can validate

XHTML documents using one of several free online

resources. Browsers will not throw errors or attempt to

inform you in any way when they encounter mistakes

in your Web page coding. Instead, they will simply

ignore any elements or attributes they do not

understand and continue trying to render the page as

best they can. Unfortunately, this can make

troubleshooting problem pages difficult. XHTML

documents with a proper DOCTYPE declaration can be

checked against a

validator

, which lets you know if

there are problems and allows you to fix them.

Second, XHTML requires that you write better, cleaner

code, which will prove much easier to edit and

maintain later. Third, XHTML is “future-proof,”

meaning that because you declare the version of the

language you are using right from the beginning,

browsers into the distant future should be able to

correctly render your pages.

Writing XHTML Strict documents also allows you to

separate the content of your page, the XHTML, from

the presentation of your page, the CSS, giving you

much more flexibility in your designs. This topic is

explored in greater detail throughout this book.

For your XHMTL document to be considered valid, you

must begin the document with a

document type

declaration.

This statement informs the browser which

“flavor” of XHTML you are using to write your code.

Although the declarations, also called

DOCTYPES

, look

complex at first, they will always be exactly the same on

every document that uses that type, so you can simply

copy and paste them from one document to the next.

The XHTML Transitional DOCTYPE:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0

Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd”>

The XHTML Strict DOCTYPE:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0

Strict //EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd”>

The XHTML Frameset DOCTYPE:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0

Frameset//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-

frameset.dtd”>

04_274361-ch01.qxp 4/17/08 2:55 PM Page 5

剩余385页未读，继续阅读

yangkangee

粉丝: 0
资源: 2

HTML与CSS：构建有效网页的视觉蓝图

html-xhtml-and-css-your-visual-blueprint-for-designing-effective-web-pages

blueprint-css-v1.0.1-8

sample-karaf-command-with-blueprint

blueprint-css

blueprint-css框架

blueprint-css：Blueprint CSS是基于CSS Grid和Flexbox构建的现代响应式CSS布局库和网格

blueprint CSS

css框架Blueprint CSS

local-simple-python-webserver-blueprint-master.zip

Visual Blueprint

最新资源