Scribd
Upload
10 views6 pages

ch04 6

Chapter 4 provides an overview of HTML, focusing on how tags are used to format web pages, including text styling, structuring documents with headings, and creating lists and tables. It explains the use of attributes for customization, the inclusion of images, and the handling of colors and special characters. The chapter emphasizes the importance of proper tag usage and nesting for effective HTML document creation.

Uploaded by

Ravikant
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views6 pages

ch04 6

Chapter 4 provides an overview of HTML, focusing on how tags are used to format web pages, including text styling, structuring documents with headings, and creating lists and tables. It explains the use of attributes for customization, the inclusion of images, and the handling of colors and special characters. The chapter emphasizes the importance of proper tag usage and nesting for effective HTML document creation.

Uploaded by

Ravikant
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Chapter 4: Marking Up With HTML: A Marking Up with HTML

H
Hypertext
t t Markup
M k Language
L Primer
P i
• Tags describe how a web page should look
Fluency with Information Technology
Third Edition • Formatting with Tags:
– Words
W d or abbreviations
bb i ti enclosed
l d iin angle
l bbrackets
k t <>
by – Come in pairs (beginning and end):
Lawrence Snyder • <title> </title>
– Tags are not case-sensitive, but the actual text
g is
between the tags

1-2

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-2

Tags for Bold, Italic, and underline An HTML Web Page File
• Bold: <b> </b> Begins with <html> and ends with </html>
• Italic: <i>
i </i>
/i
<html>
• Underline: <u> </u>
– Tag pair surrounds the text to be formatted
<head>
Preliminary material goes here, including
• You can apply more than one kind of formatting at a time
<title> … </title>
</head>
• <b><i>Veni, Vidi, Vici!</i></b> produces: Veni, Vidi, Vici!
<body>
– Tags can be in any order, but have to be nested correctly
Main content of the page goes here
• Some tags do not surround anything, so they don't have an
ending form. Closing angle bracket is replaced by /> </body>
– <hr /> inserts a horizontal rule ((line)) </html>
– <br /> inserts a line break 1-3 1-4

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-3 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-4

Structuring Documents

• Markup p language
g g describes how a document's
parts fit together
g
• Headings:
– Choice of eight levels of heading tags to produce
headings, subheadings, etc.
– Headings display material in large font on a new line
<h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>
produces:
Pope
Cardinal
Archbishop

1-5 1-6

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-5 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-6
HTML Format vs. Display Format White Space

• HTML text was run together


g on one line, but • White space that has been inserted for readability
displayed formatted on separate lines
– Spaces
• HTML source tells the browser how to produce – Tabs
th fformatted
the tt d image
i based
b d on th
the meaning
i off – New lines
the tags, not on how the source instructions look
• But HTML is usually written in a structured • Browser turns any y sequence
q of white space
p
(indented) form to make it easier for people to characters into a single space before processing
understand HTML
<h1>Pope</h1> – Exception: Preformatted information between
<h2>Cardinal</h2> <pre> and </pre> tags is displayed as it appears
<h3>Archbishop</h3>
1-7 1-8

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-7 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-8

1-9 1-10

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-9 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-10

Brackets in HTML: The Escape Symbol Special Characters

• What if our web p page


g needed to show a math • &lt; <
relationship like • &gt; >
0<p>r
• &amp;
p; &
• The browser would interpret < p > as a • &nbsp; (non-breaking space)
paragraph tag, and would not display it
• &mdash – (em dash)
• To show angle brackets, use escape symbol —
ampersand (&) — then an abbreviation, then a
semicolon (;) • Full list at
&lt; displays as < http://www.w3.org/TR/REC-html40/sgml/entities.html
&gt; displays as >
&
&amp; displays
di l as &
1-11 1-12

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-11 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-12
Accent Marks in HTML

• Letters with accent marks use the escape symbol


• Ampersand, then letter, then the name of the
accent mark
mark, then semicolon
&eacute; displays as é
&ntilde; displays as ñ

• Full list at
htt //
http://www.w3.org/TR/REC-html40/sgml/entities.html
3 /TR/REC ht l40/ l/ titi ht l

1-13 1-14

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-13 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-14

Attributes in HTML Marking Links With Anchor Tags


• Properties such as text alignment require more
• There are two sides of a hyperlink:
information
1. Anchor text (the text in the current document that is highlighted)
• For justification, we need to specify left, right, or 2. Hyperlink reference (the address of a Web page / target of the
center link)
• Begin with <a followed by a space
• Attributes appear inside the angle brackets of start
• Give the link reference using href="filename"
tag, after tag word, with equal sign, value in double
quotes Do not use “fancy/smart
quotes. fancy/smart quotes!!!
quotes!!!” • Close the start anchor tag with >
<p align = "center"> • Text to be displayed for this link
(default justification is left) • End anchor tag with </a>
<a href="target_of_the_hyperlink">Anchor Text Seen</a>
• Horizontal rule attributes: width and size (thickness)
can be specified or left to default Anchor Text Seen

<hr width="50%"
width= 50% size="3"
size= 3 />
1-15 1-16

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-15 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-16

Anchor Tags (cont'd) Anchor Tags (cont'd)

• Absolute pathnames: Reference pages at • Relative p


pathnames: Reference p pages
g stored to
the same directory (give only the name of the
other web sites using complete URLs file)
htt //
http://server/directory_path/filename
/di t th/fil Read <a href="
href= ./filename
/filename">this
>this file</a>
file</a>.
– Relative pathnames are more flexible — we can move
web files around as a group
<a href="http://www
href="http://www.aw.com/snyder/index.html">FIT</a>
aw com/snyder/index html">FIT</a>
– Relative pathnames can also specify a path deeper or
higher in the directory structure
./directory/filename
/di t /fil ../directory/filename
/di t /fil
. Current directory
.. Parent
P t directory
di t ((one llevell up))
1-17 1-18

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-17 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-18
Including Pictures With Image Tags

• Image
g Tag
g Format:
<img src="filename" />
– src short for source
– Absolute and relative pathname rules apply
• Pictures can be used as links using
anchor tag
<a href="fullsize
href= fullsize.jpg
jpg"><img
><img src="thumbnail
src= thumbnail.jpg
jpg" /></a>

1-19 1-20

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-19 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-20

Including Pictures With Image Tags Positioning the Image in the Document

• GIF and JPEG Images


g • By default, images are inserted in the page at the point
where
h th
the ttag iis specified
ifi d iin th
the HTML
HTML, and
d th
the ttextt lilines
– GIF: Graphic Interchange Format up with the bottom of the image
• 8 bits (256 colors or levels of gray) • Align
g attribute can line up
p image
g with top
p of line of text,,
middle, or bottom
– JPEG: Joint Photographic Experts Group
• Align left, center, or right attribute puts the image on the
• 24 bits (millions of colors – full color; levels of side of the browser window — text flows around it
compression) • To put image on separate line, enclose within paragraph
– Tell browser which format image g is in using
g tags
filename extension (.gif, .jpg or .jpeg) • Can specify how large the image should be displayed (in
pixels) with height and width attributes

1-21 1-22

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-21 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-22

Handling Color

• Color is used for both background and text


• bgcolor attribute of body tag gives solid
background color
– Use hexadecimal color numbers (0-9 A-F)
<bodyy bgcolor="#FF00FF">
g ((magenta)
g )
– Or use predefined color terms
<body bgcolor="magenta">

• color attribute can be used with body text, link, or


font tags
g
<font color="red">text</font> 1-23 1-24

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-23 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-24
1-25 1-26

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-25 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-26

Handling Lists Handling Tables

• Unnumbered ((bulleted)) list: • Tables begin


g and end with <table> and </table> tags
g
– <ul> and </ul> tags begin and end the list
• Rows are enclosed in table row tags, <tr> and </tr>
– <li> and </il> tags begin and end the items within the list
• Cells of each row are surrounded byy table data tags,
g ,
• Ordered
O d d (numbered)
( b d) list:
li t <td> and </td>
– <ol> and </ol> tags begin and end the list
– Uses the same <li> tags
g • Create a caption centered at the top of the table with
<caption>
ti and
d </caption>
/ ti ttags
• Sublists: Insert lists within lists (between <li> </li> tags)
• Column headings are created as first row of table by
• Definitional list: using <th> and </th> tags instead of table data tags
– <dl> and </dl> tags begin and end the list
• See examples in textbook
– <dt> and </dt> surround the terms to be defined
– <dd> andd </dd> surroundd th
the definitions
d fi iti (i
(indented)
d t d)
1-27 1-28

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-27 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-28

Controlling Text with Tables

• Tables can control arrangement


g of information
on a page
g , a series of links listed across the top
• e.g., p of the
page could be placed in a one-row table to keep
them together
– If the window is too small to display all the links, table
keeps them in a row and a scroll bar is added
– If the tags are not in a table, the links will wrap to the
next line instead

1-29 1-30

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-29 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-30
1-31 1-32

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-31 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-32

1-33 1-34

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-33 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-34

1-35

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-35

You might also like