Tự học HTML và CSS trong 1 giờ - part 18 doc

Special Characters As you’ve already learned, HTML files are ASCII text and should contain no formatting or fancy characters.. “If I can type a character like a bullet or an accented a o

Trang 1

146 LESSON 7: Formatting Text with HTML and CSS

Closing Single Tags Properly

Like the <hr> tag, the <br> tag has no closing tag in HTML To convert this tag to

XHTML and to ensure compatibility with HTML browsers, add a space and forward

slash to the end of the tag and its attributes, as shown in the following example:

And then is heard no more: it is a tale <br />

Told by an idiot, full of sound and fury, <br />

Signifying nothing.</p>

The following example shows a simple paragraph in which each line (except for the last,

which ends with a closing <p>tag) ends with a <br>:

Input▼

<p>Tomorrow, and tomorrow, and tomorrow,<br />

Creeps in this petty pace from day to day,<br />

To the last syllable of recorded time;<br />

And all our yesterdays have lighted fools<br />

The way to dusty death Out, out, brief candle!<br />

Life’s but a walking shadow; a poor player,<br />

That struts and frets his hour upon the stage,<br />

And then is heard no more: it is a tale <br />

Told by an idiot, full of sound and fury, <br />

Signifying nothing.</p>

Figure 7.10 shows how it appears in a browser

clear is an attribute of the <br> tag It’s used with images that have text wrapped alongside them You’ll learn about this attribute

in Lesson 9, “Adding Images, Color, and Backgrounds.”

NOTE

Output

FIGURE 7.10

Line breaks.

Trang 2

Addresses

The address tag <address>is used for signature-like entities on web pages Address tags

usually go at the bottom of each web page and are used to indicate who wrote the web

page, whom to contact for more information, the date, any copyright notices or other

warnings, and anything else that seems appropriate Addresses often are preceded with a

rule line (<hr>), and the <br>tag can be used to separate the lines

Without an address or some other method of signing your web pages, it’s close to

impos-sible to find out who wrote it or who to contact for more information Signing each of

your web pages using the <address>tag is an excellent way to make sure that people

can get in touch with you <address>is a block-level tag that italicizes the text inside it

The following input shows an address:

Input▼

<hr />

Laura Lemay <a href=”mailto:lemay@lne.com”>lemay@lne.com</a><br />

A service of Laura Lemay, Incorporated <br />

last revised January 10, 2010 <br />

Void where prohibited Keep hands and feet inside the vehicle at all times.

</address>

Figure 7.11 shows it in a browser

7

Output

FIGURE 7.11

An address block.

Quotations

The<blockquote>tag is used to create an indented block of text within a page (Unlike

the<cite>tag, which highlights small quotes, <blockquote>is used for longer

quotations that shouldn’t be nested inside other paragraphs.) For example, the Macbeth

Trang 3

soliloquy I used in the example for line breaks would have worked better as a

<block-quote>than as a simple paragraph Here’s an input example:

“During the whole of a dull, dark, and soundless day in the autumn

of the year, when the clouds hung oppressively low in the heavens,

I had been passing alone, on horseback, through a singularly dreary

tract of country, and at length found myself, as the shades of evening

grew on, within view of the melancholy House of Usher.”—-Edgar Allen Poe

</blockquote>

As with paragraphs, you can split lines in a <blockquote>using the line break tag, <br>

The following input example shows an example of this use:

Input▼

Guns aren’t lawful, <br />

nooses give.<br />

gas smells awful.<br />

You might as well live.<br />

—-Dorothy Parker

</blockquote>

Figure 7.12 shows how the preceding input example appears in a browser

Output

FIGURE 7.12

A block quotation.

The <blockquote> tag is often used not to set off quotations within text, but rather to create margins on both sides of a page in order to make it more readable This technique works, but strictly speaking, it’s a misuse of the tag These days, you should control margins with CSS, as explained in Lesson 8.

NOTE

Trang 4

Special Characters

As you’ve already learned, HTML files are ASCII text and should contain no formatting

or fancy characters In fact, the only characters you should put in your HTML files are

the characters that are actually printed on your keyboard If you have to hold down any

key other than Shift, or type an arcane combination of keys to produce a single character,

you can’t use that character in your HTML file This includes characters you might use

every day, such as em dashes and curly quotes (If your word processor is set up to do

automatic curly quotes, you should turn them off when you write your HTML files.)

“But wait a minute,” you say “If I can type a character like a bullet or an accented a on

my keyboard using a special key sequence, and I can include it in an HTML file, and my

browser can display it just fine when I look at that file, what’s the problem?”

The problem is that the internal encoding your computer does to produce that character

(which enables it to show up properly in your HTML file and in your browser’s display)

probably won’t translate to other computers Someone on the Internet who’s reading your

HTML file with that funny character in it might end up with some other character or just

plain garbage

So, what can you do? HTML provides a reasonable solution It defines a special set of

codes, called character entities, that you can include in your HTML files to represent the

characters you want to use When interpreted by a browser, these character entities

dis-play as the appropriate special characters for the given platform and font

Some special characters don’t come from the set of extended ASCII characters For

example, quotation marks and ampersands can be presented on a page using character

entities even though they’re found within the standard ASCII character set These

charac-ters have a special meaning in HTML documents within certain contexts, so they can be

represented with character entities to avoid confusing web browsers Modern browsers

generally don’t have a problem with these characters, but it’s not a bad idea to use the

entities anyway

7

HTML validators will complain when they encounter ampersands that are not part of entities, so you always want to encode them using entities on your pages.

CAUTION

Trang 5

Character Entities for Special Characters

Character entities take one of two forms: named entities and numbered entities

Named entities begin with an ampersand (&) and end with a semicolon (;) In between is

the name of the character (or, more likely, a shorthand version of that name, such as

agravefor an a with a grave accent, or regfor a registered trademark sign) Unlike other

HTML tags, the names are case-sensitive, so you should make sure to type them in

exactly Named entities look something like the following:

à

"

«

©

The numbered entities also begin with an ampersand and end with a semicolon, but

rather than a name, they have a pound sign (#) and a number The numbers correspond to

character positions in the ISO-Latin-1 (ISO 8859-1) character set Every character you

can type or for which you can use a named entity also has a numbered entity Numbered

entities look like the following:

õ

You can use either numbers or named entities in your HTML file by including them in

the same place that the character they represent would go So, to place the word résumé

in your HTML file, you would use either

résumé

or

résumé

Appendix B, “HTML Quick Reference,” includes a table that lists the named entities

cur-rently supported by HTML See that table for specific characters

Character Sets

All web pages are rendered using a character set A character set represents all the

letters, numbers, and symbols that can be displayed on the screen HTML originally

supported only the ISO-Latin-1 character set, which supports most accented

charac-ters, but not common characters such as bullets, em dashes, and curly quotes.

Usually when you see a page that includes nonsensical symbols where punctuation

should be, it’s because the browser is using a different character set than the one

that was used to create the document.

Trang 6

7

HTML 4.01 took things a huge leap further by adding support for Unicode Unicode

is a standard character encoding system that, although backward compatible with

our familiar ASCII encoding, offers the capability to encode characters in almost any

of the world’s languages, including Chinese and Japanese This means that

docu-ments can support any language, and that one document can contain multiple

lan-guages All modern browsers support Unicode, and can render documents that use

all the characters provided by Unicode as long as the necessary fonts are available.

Specifying Character Encoding

Most characters on a web page are the same in Unicode (UTF-8), Western (ISO-8859-1),

and Western (Windows-1252) However, some more exotic characters differ between

them If these characters are included on a web page and the character encoding does not

include those characters, they will display incorrectly For example, if the browser thinks

a page is encoded in UTF-8 and the page includes smart (curly) quotation marks that

were copied from a Word document, those characters will display as unintelligible

symbols

This is one of the reasons to use named entities wherever possible Browsers will

trans-late those entities to the proper characters, regardless of the character set used You can

change the character set the browser is using for a web page This can prove useful when

a page has the wrong encoding, or if you just want to experiment with different character

sets In my browser, you can change character sets using the Character Encoding item in

the View menu The character encoding used for the page will be selected in that menu,

and you can change to another one by selecting it

You can also specify the character set used by a page in the page header, using a <meta>

tag Here’s a tag that will specify UTF-8 as the character encoding for that page:

This indicates to the browser that the page is an HTML page encoded using utf-8 The

specify or override information that is normally provided by the web server, and indeed,

web server software enables you to specify a character encoding for all the pages that it

serves If you need to use a specific character encoding for all the pages on your site,

you’ll want to configure your web server to use that encoding, instead of adding a

Trang 7

Character Entities for Reserved Characters

For the most part, character entities exist so that you can include special characters that

aren’t part of the standard ASCII character set However, there are several exceptions for

the few characters that have special meaning in HTML itself You must use entities for

these characters, too

Suppose that you want to include a line of code that looks something like the following

in an HTML file:

<p><code>if x < 0 do print i</code></p>

Doesn’t look unusual, does it? Unfortunately, HTML cannot display this line as written

Why? The problem is with the<(than) character To an HTML browser, the

less-than character means “this is the start of a tag.” Because the less-less-than character isn’t

actually the start of a tag in this context, your browser might get confused You’ll have

the same problem with the greater-than character (>) because it means the end of a tag in

HTML, and with the ampersand (&) because it signals the beginning of an entity Written

correctly for HTML, the preceding line of code would look like the following instead:

<p><code>if x < 0 do print i</code></p>

HTML provides named entities for each of these characters, and one for the double

quo-tation mark, too, as shown in Table 7.1

TABLE 7.1 Escape Codes for Characters Used by Tags

& &

The double quotation mark escape is the mysterious one Technically, if you want to

include a double quotation mark in text, you should use the escape sequence, and you

shouldn’t type the quotation mark character However, I haven’t noticed any browsers

having problems displaying the double quotation mark character when it’s typed literally

in an HTML file, nor have I seen many HTML files that use it For the most part, you’re

probably safe using plain old quotes (“) in your HTML files rather than the escape code

Furthermore, HTML validators will not flag quotation marks that are not encoded using

entities

Trang 8

Text Alignment

Text alignment is the capability to arrange a block of text, such as a heading or a

para-graph, so that it’s aligned against the left margin (left justification, the default), aligned

against the right margin (right justification), or centered The old-fashioned approach to

aligning elements is to use the alignattribute, which was deprecated as of HTML 4.01

and has been removed completely from HTML5 The approach currently in favor is to

use CSS, as explained next

Aligning Individual Elements

To align an individual heading or paragraph, include the alignattribute in the opening

tag The alignattribute has four values: left,right,center, and justify Consider the

following examples in the code snippet that follows

The following input and output example shows the simple alignment of several headings

Figure 7.13 shows the results

Input▼

<h1 align=”center”>Northridge Paints, Inc.</h1>

<p align=”center”>We don’t just paint the town red.</p>

<h1 align=”left”>Serendipity Products</h1>

<h2 align=”right”><a href=”who.html”>Who We Are</a></h2>

<h2 align=”right”><a href=”products.html”>What We Do</a></h2>

<h2 align=”right”><a href=”contacts.html”>How To Reach Us</a></h2>

7

Output

FIGURE 7.13

Headings

with varying

alignments.

Aligning Blocks of Elements

A slightly more flexible method of aligning text elements is to use the <div>tag The

<div>tag supports several attributes Among these attributes is align(deprecated as

of HTML 4.01), which aligns elements to the left, right, or center just as it does for

Trang 9

headings and paragraphs Unlike using alignments in individual elements, however,

<div>is used to surround a block of HTML tags of any kind, and it affects all the tags

and text inside the opening and closing tags Two advantages of divover the align

attribute follow:

n You need to use <div>only once, rather than including alignrepeatedly in several

different tags

n You can use <div>to align anything (headings, paragraphs, quotes, images, tables,

and so on); the alignattribute is available on only a limited number of tags

To align a block of HTML code, surround it with opening and closing <div>tags, and

then include the alignattribute in the opening tag As in other tags, aligncan have the

value left,right, or center:

<h1 align=”left”>Serendipity Products</h1>

<div align=”right”>

<h2><a href=”who.html”>Who We Are</a></h2>

<h2><a href=”products.html”>What We Do</a></h2>

<h2><a href=”contacts.html”>How To Reach Us</a></h2>

</div>

All the HTML between the two <div>tags will be aligned according to the value of the

alignattribute If individual alignattributes appear in headings or paragraphs inside the

<div>, those values will override the global <div>setting

Note that <div>itself isn’t a paragraph type; it’s just a container Rather than altering the

layout of the text itself, it just enables you to apply your own styles to the text and tags

inside One function of <div>is to change text alignment with the alignattribute It’s

also often used with CSS to apply styles to a specific block of text (much like its

coun-terpart,<span>) In fact, to center elements within the <div>the CSS way (instead of

using the deprecated alignattribute), you can use the text-alignproperty Valid values

for it are left,right,center, and justify Figure 7.14 shows how it’s used

Input▼

<div style=”text-align: left”>Left aligned text.</div>

<div style=”text-align: right”>Right aligned text.</div>

<div style=”text-align: center”>Centered text.</div>

<div style=”text-align: justify”>This text is justified I’m adding some extra

text for padding so that you can see exactly how the justification works As you

can see, the text is expanded so that it is aligned with both the left and right

margins.</div>

Trang 10

Output

FIGURE 7.14

Various text

alignments

avail-able using CSS.

7

You can also include the alignattribute in the <p>tag It’s most common to use the

justifysetting for the alignattribute with the <p>and<div>tags When you justify

a paragraph, the text is spaced so that it’s flush with both the left and right margins of

the page

Fonts and Font Sizes

Earlier in this lesson, I described a few font-related properties that you can manipulate

using CSS In fact, you can use CSS to control all font usage on the page I also

described how the font-familyproperty can be used to specify that text should be

ren-dered in a font belonging to a particular general category, such as monospace or serif

You can also use the font-familyproperty to specify a specific font

You can provide a single font or a list of fonts, and the browser will search for each of

the fonts until it finds one on your system that appears in the list You can also include a

generic font family in the list of fonts if you like, just as you can with the <font>tag

Here are some examples:

<p style=”font-family: Verdana, Trebuchet, Arial, sans-serif”>

This is sans-serif text.</p>

<p style=”font-family: Courier New, monospace”>This is

monospace text.</p>

<p style=”font-family: Georgia”>This text will appear in the

Georgia font, or, if that font is not installed, the browser’s

default font.</p>

You can also use CSS to specify font size Unfortunately, although the approach for

specifying the font face itself is the same whether you’re using the <font>tag or CSS,

specifying font sizes under CSS is much more complicated than it is with the <font>tag

The trade-off is that with this complexity comes a great degree more flexibility in how

font sizes can be specified Let’s start with the basics To change the font size for some

text, the font-sizeproperty is used The value is a size (relative or absolute) in any of

the units of measure supported by CSS

Định dạng
Số trang	10
Dung lượng	767,49 KB