HTML cơ bản - p 29 potx

Use comments within the code to explain the relationship of the markup to the content.. You can add a large variety of information about a page to the head sec-tion of an HTML document,

264 Chapter 5: Building Websites

noticeable in the preview from messing up the blog’s front page This can

hap-pen, for example, when a link at the end of a post is missing the closing anchor

tag (</a>) When reproduced on the front page, the link may extend into the

title of the post below it in the listing

not te Sti ng i n Di FFe r e nt B roWS e r S

Browsers are getting better all the time and are converging on HTML5 as a

common standard But many of the HTML5 specifications for browser

behav-ior are recommendations, not requirements Also, a wider variety of browsers

are in use, across more device types and operating systems, than ever before

Furthermore, browsers are getting bigger and incorporating more features As

a consequence of all this complexity, there are bugs and edge conditions where

browser behavior is not well defined Therefore, there is no way to ensure that

your web pages will perform flawlessly without testing them in all the major

browsers

It is human nature to become attached to your favorite tools When other people encounter problems with your website, it’s tempting to blame their

poor choice of browser Avoid falling into this unproductive attitude by

mak-ing it a point to use different browsers as you work on your website Testmak-ing in

Internet Explorer, Firefox, Chrome, Safari, and Opera covers about 98

per-cent of all browser use, according to data collected on Wikipedia (Search for

“browser share” to find the latest statistics.) Unfortunately, that also means

testing on older versions of Internet Explorer Currently, Internet Explorer,

version 6, running on Windows XP, NT, 2000, and earlier versions of

Micro-soft’s operating systems, still accounts for a fifth of all browser usage! This is in

spite of the fact that this browser is ten years old and is widely derided for its

security issues and lack of support for modern web standards It is a persistent

fact that many people are forced to work with the tools they are given, not the

ones they would prefer Major web service companies such as Google do not

provide support for IE6 users of their advanced applications Whether you

choose to support IE6, or any particular browser, is up to you and your regard

for your target audience

Social media provides a solution to the dilemma of too many browsers

You can join a web authors’ or developers’ community and ask your friends

to check out your work in the environments you don’t have access to Make a

formal checklist that includes browser name, version, operating system, and

Summary 265

not put ti ng i n e noug h Com m e ntS

Do yourself a big favor and add a lot of comments to your HTML, CSS, and

JavaScript code Use comments within the code to explain the relationship

of the markup to the content Put comments at the beginning of every page

to explain the purpose of that page and to provide authorship information

and version history You will thank yourself later, as will anyone else who

has to work on the code you left behind after you move on to bigger and

better things

Summary

Here are the important points to remember from this chapter:

. Good websites are the result of good planning There are many

approaches to building a website, and even more tools to help you do it

Spending the time to analyze your requirements will help you choose the

best approach to putting your content online

. A website is essentially a directory of files on a computer running web

server software There are common conventions for naming the

subdi-rectories and files in a website Some important protocols require the

presence of files with specific names

. Good website organization and good navigation go hand in hand There

are different techniques for providing navigation Menu bars, drop

menus, buttons, imagemaps, and embedded hyperlinks all play a part

. Content can be hidden on a page and then later revealed in response to

a click, tap, or other user action This provides a way to offer more rich

content to search engine robots while avoiding clutter for humans

. You can add a large variety of information about a page to the head

sec-tion of an HTML document, including its relasec-tionships to other pages on

the Web The head section is also where CSS styles are defined and other

resources are associated with the page

. Search engine optimization is an important part of most website

proj-ects Good SEO starts with the proper use of HTML as a semantic

markup language

This page intentionally left blank

Appendix A:

HTML5 Quick Reference

The tables in this appendix list the HTML elements in the HTML5 draft

specification, along with a brief description, the applicable content

model, and the important attributes for each element The content

model for any element roughly defines what types of content the element may

contain

An asterisk (*) next to the element’s name indicates that it is new or

signifi-cantly changed in HTML5

text A string of characters containing no HTML markup

phrasing Text content plus HTML inline elements and

comments flow Phrasing content plus HTML body elements

empty The element is not usually written as a container; a

self-closing element metadata The content consists of HTML head elements and

comments about the document

element name The content depends on the named child element(s)

268 Appendix A: HTML5 Quick Reference

Root Element

html Provides the container for

all other HTML markup and content

One head

followed by one

body element

Document Head Elements

head Provides a container

for elements containing information about the document and its relation

to other documents and resources

metadata

title Provides the title for the

base Sets the base URL for any

hyperlinks using relative addressing

link Provides a URL to a related

meta Provides data values relating to

http-equiv style Provides a container for CSS

script Provides a container for

client-side executable code, such as JavaScript

code statements src, type noscript Provides content for user metadata, flow

Section Elements 269

Section Elements

body Provides the container for

all content elements: HTML

markup and content

flow

section* Marks a section of a document

that can have its own header

and footer elements

flow

nav* Marks content containing

article* Defines a document section

that may have its own headings

as in a blog index or archive

flow

aside* Marks content that is tangential

to other information in the

document

flow

header* Marks content that appears

above the main contents of a

web page

flow

footer* Marks content that appears

below the main contents of a

web page

flow

address Provides information about the

hgroup* Groups other elements into a

heading section headingelements

270 Appendix A: HTML5 Quick Reference

Heading Elements

Block Elements

div Marks a division of a page or

p Represents a paragraph of

br Inserts a line break into the

pre Contains preformatted content;

white space and line breaks are kept as is

phrasing

blockquote Marks a quote from an external

figure Provides annotation for figures,

photos, diagrams, code listings, and so on

flow

figcaption Marks a caption for a figure

Inline Elements 271

List Elements

li Marks an item of an ordered or

dl Creates a definition list dt, dd

dt Marks the term part of a definition

dd Marks the definition part of a

Inline Elements

a Creates an anchor that represents

either a hypertext link or a link’s

in-page destination

noninteractive flow href, name,target

em Marks contents as emphasized phrasing

strong Marks contents as strongly

small* Represents content such as “the

cite Marks the title of a referenced

q Represents content quoted from

dfn Marks the defining instance of a

abbr Represents an abbreviation or

272 Appendix A: HTML5 Quick Reference

time* Provides a machine-readable

timestamp that is equivalent to the element’s content

phrasing datetime,

pubdate

code Represents a fragment of computer

var Represents a variable name phrasing

samp Represents sample output of a

kbd Represents user input to a

sub Marks the content as a subscript phrasing

sup Marks the content as a superscript phrasing

i Indicates that the content is in

an alternative voice or should be italicized but not emphasized

phrasing

b Indicates that the content should

be in boldface without signifying any special importance

phrasing

mark* Indicates a highlight that was

added by an editor or author to quoted text

phrasing

ruby* Marks content in Asian languages

that includes accompanying phonetic or other linguistic info

phrasing, rt, rp

rt* Marks the text component of a

rp* Marks the annotation part of a

Inline Elements (continued)

Embedded Elements 273

span Provides a meaningless inline

ins Marks content as inserted by an

del Marks content as deleted by an

Embedded Elements

img Inserts an inline image

into the content empty src, width, height,alt, usemap, ismap

iframe Represents a nested

browsing context—one

document embedded

inside another

flow, HTML document src, width, height,name, sandbox,

seamless

embed Inserts content from

an external source

(typically non-HTML

from a plugin) into a

document

empty src, width, height,

type

object Represents an external

resource, possibly an

image or other media

type from a plugin

param data, type, width,

height, name, form

param Provides parameters for

a plugin invoked by an

object element

video* Inserts a video or

movie, possibly with

accompanying audio,

into the content

source src, width, height,

controls, poster, loop, autoplay, preload