Text, Tables, Special Characters

8/6/2019 Text, Tables, Special Characters

1/25


2/25


3/25

Methods of Text Control

There are various means to control the look andformatting of text in your documents. It should comeas no surprise that the more direct methodstagshave been deprecated in favor of CSS controls in

HTML 4.01 and XHTML. The tag

The tag enables you to directly affect the sizeand color of text. The size attribute is used to change

the size of text, the face attribute is used to changethe font style of the text and the color attribute is usedto change the color. The size of the text is specified bya number, from 1-7, or by signed number (also 1-7).


4/25

You can use a handful of tags to emphasize portions

of text.


5/25

CSS text control

CSS provides several different properties to

control text. Table 8-2 lists some of the morepopular properties. As you can see, CSS offers a bit

more control over your text, allowing you to specify

actual fonts and actual font sizes. However, the

advantage to using CSS properties over hardcodedtags is not found in the list of available properties,

but in the flexibility in formatting and effecting later

changes.


6/25


7/25

Sample Code of .

Hello

World

Sample Code for CSS

p{ font: 14pt bold; color: red }

Hello World.


8/25

Bold and Italic Text Two surviving text emphasis tags are bold and italic. Their effect on

text is, as expected, to make it bold or italic.

Sample Code for Bold and Italic.

This is normal text.

This is bold text.

This is italic text.

Monospace (Typewriter) Fonts

Another text tag that has survived deprecation is the teletype (), or

monospaced, tag. This tag tells the user agent that certain text should be

rendered in a monospaced font. Such uses include reserved words in

documentation, code listings.


9/25

Superscripts and Subscripts

There are two tags, and , for formatting text in superscript and

subscript.

Superscript - a character or symbol set or printed or written above andimmediately to one side of another character.

Subscript - a character or symbol set or printed or written beneath or

slightly below and to the side of another character.

Sample for Superscript and subscript.

This is normal text.

This is the 16th day of the month.

Water tanks are clearly marked as H2O.


10/25

AbbreviationsYou can use the abbreviation tag () to mark

abbreviations and, optionally, give readers the expansion of theacronym used. For example, you could use this tag with

acronyms such as HTML

Sample Code:HTML


11/25


12/25

Special Characters Several characters mean special things in HTML and are used

for special purposes by user agents. For example, the less thansymbol (


13/25

En and Em Spaces and Dashes

There are two additional types of spaces and dashes, en and em spaces and

dashes. The characters got their name from their relative sizeen

characters are as wide as a capital N, while em characters are as wide as a

capital M.

These characters have specific uses in the English language:

En spaces are used when you need a larger space than a normal space

provides. For example, en spaces can be used between street numbers and

street names (123 Main) for clarity.

Em spaces are used to separate elements such as dates and headlines, figure

numbers and captions, and so on.

En dashes are used instead of hyphens in constructs such as phone numbers,

element numbering, and so on.

Em dashes are used grammatically when you need to divide thoughts in a

sentence.


14/25

Copyright and Trademark Symbols

Copyright and trademark symbols are special symbols that

indicate a legal relationship between individuals (or

companies) and text. The Copyright symbol ( c) is used toindicate that someone has asserted certain rights on written

materialtext included with the symbol usually indicates

which rights.

The trademark and registered marks (and ) are used to indicatethat a particular word or phrase is trademarkedthat is, marked

(trademarked) or registered for unique use by an individual or

company.


15/25

Currency Symbols There are many currency symbols, including the U.S. dollar ($), the English

pound (), the European euro (), and the Japanese yen ().


16/25

Real Quotation MarksReal quotation marks, used in publishing, cannot be typed on a

standard keyboard. The quote marks available on the keyboard

( and ) are straight quotes; that is, they are small,

superscripted, vertical lines. Quote marks used in publishing

typically resemble the numbers 6 and 9that is, dots with a

serif leading off of them.


17/25

Mathematical Symbol


18/25

Mathematical Symbol(continuation)


19/25


20/25

Tables - are a powerful HTML tool that can be used in

many ways. Developed originally to help communicate

tabular data (usually scientific or academic-based data),

tables are now used for many purposes, including actual

page design.

Parts of an HTML Table

An HTML table is made up of the following parts:

Rows

Columns

Header cells

Body cells

Caption

Header row(s)

Body row(s)

Footer row(s)


21/25

Sample Code for tag:

Table

Sample Data 1

Sample Data 2


22/25

Many parts of the HTML table are optionalyou only need to delimit the table

(with tags) and define rows (via tags) and columns (via tags).

Such a minimum table would resemble

Table Width and Alignment Typically, an HTML table expands to accommodate the contents of its cells.

Once a table expands to the limits of its container object, the contents of the cells

will wrap.

Sometimes you will want to manually size a table, either to fill a larger space or to

constrain the tables size. Using the width attribute in the tag you can set a

tables size by specifying the table width in pixels or a percentage of the containing

object.

or

The tag also supports the align attribute, which controls where the table is

positioned in the containing element. The align attribute supports left, right, andcenter values


23/25

Cell Spacing and Padding

There are two cell spacing optionspadding and spacingthat

you can control in your HTML tables.

Cell spacing - is the space between cells.

Cell spacing is controlled with the cellspacing attribute and can be

specified in pixels or percentages.

Cell padding - is the space between the cell border and its contents.

Cell padding is controlled with the cellpadding attribute.


24/25

Borders and Rules The border around HTML tables and in between cells can be configured in many

ways. The following sections cover the various ways you can configure table borders

and rules.

Table borders You can use the borderattribute of the tag to configure the outside

border of the table.

Rows Table rows are the horizontal elements of the table grid and are delimited with

table row tags ().

Cells Individual cells of a table are the elements that actually hold data. In HTML, cell

definitions also define the columns for the table. You delimit cells/columns with

table data tags ().

Table Captions Table captions () provide an easy method to add descriptive text to a

table.


25/25

Documents

Text, Tables, Special Characters