Date post: | 08-Apr-2018 |
Category: |
Documents |
Upload: | junjunsegura |
View: | 223 times |
Download: | 0 times |
of 25
8/6/2019 Text, Tables, Special Characters
1/25
8/6/2019 Text, Tables, Special Characters
2/25
8/6/2019 Text, Tables, Special Characters
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).
8/6/2019 Text, Tables, Special Characters
4/25
You can use a handful of tags to emphasize portions
of text.
8/6/2019 Text, Tables, Special Characters
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.
8/6/2019 Text, Tables, Special Characters
6/25
8/6/2019 Text, Tables, Special Characters
7/25
Sample Code of .
Hello
World
Sample Code for CSS
p{ font: 14pt bold; color: red }
Hello World.
8/6/2019 Text, Tables, Special Characters
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.
8/6/2019 Text, Tables, Special Characters
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.
8/6/2019 Text, Tables, Special Characters
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
8/6/2019 Text, Tables, Special Characters
11/25
8/6/2019 Text, Tables, Special Characters
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 (
8/6/2019 Text, Tables, Special Characters
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.
8/6/2019 Text, Tables, Special Characters
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.
8/6/2019 Text, Tables, Special Characters
15/25
Currency Symbols There are many currency symbols, including the U.S. dollar ($), the English
pound (), the European euro (), and the Japanese yen ().
8/6/2019 Text, Tables, Special Characters
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.
8/6/2019 Text, Tables, Special Characters
17/25
Mathematical Symbol
8/6/2019 Text, Tables, Special Characters
18/25
Mathematical Symbol(continuation)
8/6/2019 Text, Tables, Special Characters
19/25
8/6/2019 Text, Tables, Special Characters
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)
8/6/2019 Text, Tables, Special Characters
21/25
Sample Code for tag:
Table
Sample Data 1
Sample Data 2
8/6/2019 Text, Tables, Special Characters
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
8/6/2019 Text, Tables, Special Characters
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.
8/6/2019 Text, Tables, Special Characters
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.
8/6/2019 Text, Tables, Special Characters
25/25