Line, Breaks, Paragraph, Etc

Lines, Line Breaks
& Paragraph
O
B CHAPTER Objectives
J • to examines block elements in detail.
E
• to know the three different list types in HTML: numbered,
C bulleted, and definition. Learned how to define and format each
type of list and how you can nest lists for more flexibility.
T
I • to know various image formats supported “natively” by most user
agents and how to incorporate them into Web documents.
V
E
S
HTML Headings
H
E Headings are important in HTML documents.
A Headings are defined with the <h1> to <h6> tags.
D  <h1> defines the most important heading.

 <h6> defines the least important heading.
I
N
G
S
HTML Headings
Chapter 4
Headings Are Important
H
Use HTML headings for headings only. Don't use headings to make text
E BIG or bold.
A Search engines use your headings to index the structure and content of
D your web pages.
I Since users may skim your pages by its headings, it is important to use
headings to show the document structure.
N
H1 headings should be used as main headings, followed by H2 headings,
G then the less important H3 headings, and so on.
S
HTML Lines
L
I HTML Lines
N The <hr /> tag creates a horizontal line in an HTML page.
E The hr element can be used to separate content:
S
HTML Comments
C
O HTML Comments
M
Comments can be inserted into the HTML code to make it more
M readable and understandable. Comments are ignored by the browser and are
not displayed.
E
Comments are written like this:
N
T 
S
TRY it in
YOURSELF
HTML Headings
Headings
How to display headings in an HTML document.
T <html>
<body>
R
Y <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
I <h5>This is heading 5</h5>
T
</body>
</html>
HTML Comments
Hidden comments
T How to insert comments in the HTML source code.
R
<html>
Y <body>


I <p>This is a regular paragraph</p>
T </body>
</html>
HTML Lines
Horizontal lines
T How to insert a horizontal line.
R <html>
<body>
Y <p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
I <p>This is a paragraph</p>
<hr />
T <p>This is a paragraph</p>
</body>
</html>
L HTML <br> Tag
I
N Definition and Usage
The <br> tag inserts a single line break.
E The <br> tag is an empty tag which means that it has no end tag.
Browser Support
B The <br> tag is supported in all major browsers.
R Differences Between HTML and XHTML
E In HTML the <br> tag has no end tag.
In XHTML the <br> tag must be properly closed, like this: <br />.
A
K
S
L HTML <br> Tag
I Standard Attributes
N DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is

allowed. S=Strict, T=Transitional, and F=Frameset.
E
The <br> tag supports the following standard attributes:
B
R
E
A Event Attributes
K The <br> tag does not support any event attributes.
S
HTML Paragraph
P
A
Paragraphs
R
In HTML, paragraphs are delimited by the paragraph tag, <p>. The
A paragraph tag controls the line spacing of the lines within the paragraph as well as
G the line spacing between paragraphs. The default spacing is single space within the
paragraph, and double-space between paragraphs.
R
Each paragraph in your document should start with an opening
A paragraph tag (<p>) and end with a closing paragraph tag (</p>)
P
H
HTML Paragraph
P
A
<p> tag (paragraph tag)
R
A This tag indicates the beginning of a new paragraph. </p> is
optional.
G We can align the paragraph in 4 ways by the following
<p align=“left”>------</p>
R <p align=“right”>------</p>
A <p align=“center”>------</p>
<p align=“justify”>------</p>
P
H
Q HTML Quoted Text
U
O • The <blockquote> tag is used to delimit blocks of quoted text. For
T example, the following code identifies the beginning paragraph of
the Declaration of Independence as a quote:
E
D
T
E
X
T
TRY it in
YOURSELF
HTML <br> tag
A line break is marked up as follows:
T <html>
<body>
R
Y <p>
To break<br />lines<br />in a<br
/>paragraph,<br />use the br element.
</p>
I
</body>
T </html>
HTML Paragraph
A paragraph is marked up as follows:
<html>
<body>
T <p>
This paragraph
contains a lot of lines
R in the source code,
but the browser
Y ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
I in the source code,
but the browser
T ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window,
the number of lines in this paragraph will change.
</p>
Soft Hyphens
Occasionally, you will want to allow a browser to hyphenate long words to
H better
justify a paragraph. For example, consider the following code
Y <p style=“text-align: justify;”>The morbid fear of the number 13, or
triskaidekaphobia, has plagued some important historic figures like Mark
P Twain
H and Napoleon.</p>
E In cases where you want a client browser to be able to hyphenate a word if

necessary, use the soft hyphen entity () to specify where a word should
N behyphenated. Using the preceding example, you can hyphenate the word
“triskaidekaphobia” with soft hyphens:
S
<p style=“text-align: justify;”>The morbid fear of the number 13, or
triskaidekaphobia, has plagued some important historic
figures like Mark Twain and Napoleon.</p>
R
Preserving Formatting—The <pre> Element
E
Sometimes you will want the client browser to interpret your
text literally, including the white space and forced formatting (line
E breaks, and so on). In those cases, you can use the preformatted tag
(<pre>).
L
The preformatted tag tells the client browser that the text
E within the tag has been preformatted and should appear exactly as it
appears in the code. The tag also causes all text within to be
M rendered in a mono space font.
E
N
T
Indents
Occasionally, you will want to indent the first line of paragraphs in
I your documents.
N To do so, you can use the text-indent property of the paragraph tag
and an applicable style. For example, if you wanted the first line of all
D paragraphs to be indented by half an inch, you would use a style
E similar to the following:
N <style type=“text/css”>
p { text-indent: .5in; }
T </style
S
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>First Line Indents</title>
<style type=“text/css”>
I p{ text-indent: 0.5in; }
</style>
N </head>
<body>
D <p>When in the Course of human events, it becomes necessary for one people to dissolve the
political bands which have connected them with another, and to assume among the powers
E of the earth, the separate and equal station to which the Laws of Nature and of Nature’s God entitle
them, a decent respect to the opinions of mankind requires that they should
declare the causes which impel them to the separation.</p>
N
<p>We hold these truths to be self-evident, that all men are created equal, that they are endowed by
T their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of
Happiness.--That to secure these rights, Governments are instituted among Men, deriving their
S just powers from the consent of the governed, --That whenever any Form of Government becomes
destructive of these ends, it is the Right of the People to alter or to abolish it, and to
institute new Government, laying its foundation on such principles and organizing its powers in such
form, as to them shall seem most likely to effect their Safety and Happiness.
Prudence, indeed...</p>
</body>
</html>
D
I DIV Elements
V
The <div> tag is used to
delimit divisions of a document, which can include several
E paragraphs or other
L block elements.
E Instead of defining a style for the paragraph tag,

define it as an unattached class (one
M without a specified element) and use it with the <div> tag.
E
N
T
D “http://www.w3.org/TR/html4/strict.dtd”>
<html>
I <head>
<title>Division Borders withDivision Tags</title>
V <style type=“text/css”>
.indent-highlight { padding-left: 50px;
padding-right: 50px; border: solid 3px; }
</style>
</head>
E <body>
<div class=“indent-highlight”>
L <p>For the first few days I could not feed in peace; but as I found that this terrible creature
never came into the field, or did me any harm, I began to disregard it, and very soon I
cared as little about the passing of a train as the cows and sheep did.</p>
E <p>Since then I have seen many horses much alarmed and
restive at the sight or sound of a steam engine; but thanks
M to my good master’s care, I am as fearless at railway
stations as in my own stable.</p>
E <p>Now if any one wants to break in a young horse well, that
is the way.</p>
N </div>
</body>
</html>
T
HTML Special Characters (Entities)
E
 Some special characters must be referenced directly instead of simply
N typed into the document.
T  Some of these characters cannot be typed on a standard keyboard, such as
the trademark symbol (™)
I  or copyright symbol(©);
T  others could cause the HTML client confusion(such as the angle brackets,
I <and>).
 Such characters are common referred to as “entities.”
E  Entities are referenced by using a particular code in your documents.
S  This code always begins with an ampersand(&)
 and ends with a semicolon. only referred to as “entities.”
E Three different ways to specify an entity exist:
N
T • A mnemonic code(such as copy for the copyright symbol
• A decimal value corresponding to the character(such as #169
I
for a copyright symbol)
T • A hexidecimal value corresponding to the character(such as
I #xA9 for a copyright symbol)
E
S
The following are all examples of valid entities:
E
N
T • —A non-breakingspace(see later)
• <—The less-than symbol, or left-angle bracket(<)
I
• ©—The copyright symbol (c)
T
• &—An ampersand(&)
I • —A nemdash (—)
E
S
Let’s have a
break!
LISTS
HTML List Elements
L • HTML specifies three different types of lists:

– Ordered lists (usually numbered)
I – Unordered lists (usually bulleted)
S – Definition lists (list items with integrated definitions)
T
S
HTML LISTS
LISTS HTML allows you to create three kinds of lists. Ordered
lists. Un ordered lists. Definition lists.
L
I Ordered lists
S
Ordered lists It is similar to the numbers list created in Ms-Word. In this
T case the items are preceded by numbers(1,2,3,……),lower case or
upper case , upper case or lower case roman numbers . Here each list
S must be enclosed between <ol> and </ol>. Each list item is preceded
by <li> tag.
Example: <ol> <li> Rama. <li> Raghu. <li> Sita. </ol> Output:- 1.Rama.
2.Raghu. 3.Sita.
HTML Ordered Lists
L • Html allows you to specify different types of ordered lists by

specifying “type attribute” with <ol> tag.
I • Type =“1” ----- 1,2,3…...
S • Type =“A” ----- A,B,C…...
T • Type =“I” ----- I,II,III…...
• Type =“I” ----- i,ii,iii…..
S • Type=“a” ----- a,b,c…
HTML Ordered Lists
<html>
L <head>
<title>Example Ordered List</title>
I </head>
<body>
S <ol>
<li>In Internet Explorer, open the Web page that displays
T the graphic you wish to use as wallpaper for your
desktop.</li>
S <li>Right-click on the image to open the context menu.</li>
<li>Choose Set as Background to save the image and use it
as your desktop wallpaper.</li>
</ol>
</body>
</html>
HTML Ordered Lists
<html>
L <head>
<title>Example Ordered List - Letters</title>
I </head>
<body>
S <ol style=“list-style: upper-alpha”>
<li>In Internet Explorer, open the Web page that displays
T the graphic you wish to use as wallpaper for your
desktop.</li>
S <li>Right-click on the image to open the context menu.</li>
<li>Choose Set as Background to save the image and use it
as your desktop wallpaper.</li>
</ol>
</body>
</html>
HTML Unordered List
L
Unordered list
I Listing the items in the form of bullets, just like in ms-word. In this case a
round or a square bullets will be precedes the item list. The list must be
S enclosed between <ul> and </ul>.
T
Example: <ul> <li> Rama. <li> Raghu. <li> Sita. </ul> Out
S By specifying the “type” it will display “round” or “square” bullet.
Ex:-<ul type=“square”>
Ex:- <ul type=“circle”>
put:- Rama. Raghu. Sita.
HTML Unordered List
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML
L 4.01//EN”
I <html>
<head> <title>Example Unordered List</title>
S </head>
T <body>
<ul>
S <li>Vanilla</li>
<li>Chocolate</li>
<li>Strawberry</li>
</ul>
</body>
</html>
HTML Definition List
Definition list It is used for defining the terms. Here all the definitions must be
L enclosed between <dl> and </dl>.
I Each definition is preceded by “definition term” tag <dt> The description of
the definition is preceded by <dd>
S Example
<dl>
T <dt>dir
<dd> this command is used to list the files and directories
S <dt>copy
<dd> this command is used to copy the contents from one file to
another.
</dl>
Output: dir this command is used to list the files and directories. copy this
command is used to copy the contents from one file to another.
HTML Definition List
<html>
<head>
L <title>Example Definition List</title>
</head>
I <body>
<dl>
S <dt>Internet Explorer</dt>
<dd>Developed by Microsoft, an integral piece of Windows
T products.</dd>
<dt>Mozilla</dt>
<dd>Developed by the Mozilla Project, an open source
S browser for multiple platforms.</dd>
<dt>Netscape</dt>
<dd>Developed by Netscape Communications Corporation, one
of the first graphical browsers.</dd>
<dt>Safari</dt>
<dd>Developed by Apple Computer, Inc, for Apple’s OSX
operating system.</dd>
</dl>
</body>
</html>
HTML Nested List
Nested Lists
You can nest lists of the same or different types. For example, suppose you
L have abulleted list and need a numbered list beneath one of the items, as
shown:
I
S ✦ Send us a letter detailing the problem. Be sure to include the following:
1. Your name
T 2. Your order number
3. Your contact information
S 4. A detailed description of the problem
HTML Nested List
In such a case, you would nest an ordered list inside an unordered one, as shown in
the following code:
L <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

I <html>
<head>
<title>Example Definition List</title>
S </head>
<body>
T <ul style=“list-style: disc;”>
<li>Send us a letter detailing the problem. Be sure to
S include the following:</li>
<ol style=“list-style: decimal;”> <li>Your name.</li>
<li>Your order number.</li>
<li>Your contact information.</li>
<li>A detailed description of the problem.</li>
</ol>
</ul>
</body>
</html>
IMAGES
HTML Image Format
I Image Formats for the Web
M Most user agents support, to some degree, three graphics file
A formats: GIF, JPEG, and PNG. The GIF and JPEG formats have
been supported for quite some time (since the origin of the
G Web), while PNG is relatively new. This section covers the
basics of the image formats.
E
S
GIF
GIF was the earliest format in use in inline images on
I the Web. Version 1 browsers could open GIF images
inline, but required that JPEG images be opened out-
M of-line.GIF uses a compression scheme—called LZW
compression—that predates CompuServe, even
A though you might see it called CompuServe GIF.
CompuServe implemented LZW compression, thinking
G it was in the public sphere and then found out it was
proprietary. A lot of lawyers sorted it out.
E
How does GIF work? Simply put, GIF indexes images
S to an 8-bit palette. The system palette is 256 colors.
Before you can save your file in GIF format, the utility
you are using simply makes its best guess at mapping
all your colors to one of the 256 colors in an 8-bit
palette.
JPEG
JPEG takes a different approach. JPEG stands for
I the Joint Photographic Experts Group, the name of
the group that created the standard. With JPEG, you
M get to keep all your colors, but you don’t get to keep
all the data about the image. What kinds of images
A lend themselves to being compressed with JPEG? A
tree. If you take a photo of a pine tree, the acorns are
G in specific places, but when the image is compressed
and decompressed (opened on your Web page), the
E computer has to approximate where those acorns
S went, because it had to throw away some of the
data. Is this a problem? Not with most photos of most
pine trees. Faces also take well to JPEG because the
colors are all there; faces in GIF can look unnatural
because of
the color loss.
PNG
I The Portable Network Graphics, or PNG format,
was developed exclusively for the Web and is in
M the public domain. The PNG format takes
advantage of a clever way of storing the
A information about the image so you don’t lose
color and you don’t lose image quality; it is a
G lossless format. The only drawback is, because
E the standard is so new, only fourth-generation and
later browsers support PNG graphics. Eventually,
S PNG will replace GIFs for many color-rich, still
image files. Only GIFs can support
animation and transparency.
Enhancing downloading speed
I What can you do to ensure your pages download quickly? There are a few things:
✦ Limit image file sizes.
M ✦ Limit the number of images.
✦ Reuse images as much as possible so images can be loaded from cache.
A ✦ Use frames so only part of the browser windows need to reload.
✦ Use text rather than images, where possible.
G Image file sizes
E You can limit image file sizes by doing the following:
S ✦ Using the maximum compression your image will take
✦ Using the smallest bit-depth your image can stand
✦ Minimizing the dimensions of your image on the page
Test your pages at 640 × 480, 800 × 600, and 1024 × 768 to see how they will look to
different visitors. Often, an image that renders well at 1024 × 768 and doesn’t
dominate the page will look huge and overbearing at 640 × 480.
Number of images
I How many images is the right number? You might be

surprised to learn that sometimes very small images with white
M space between them load faster than one large image.
A Take advantage of white space to contribute to your
G images. You can use two intelligent techniques to get more image
for the byte. By changing the background color to match the
E background color of your images, you can keep your images
smaller. By anti-aliasing the text against that background to blend
S the edges into the background color, you can achieve the look of
one large graphic with multiple small, fast-loading images
Inserting an Image
Images are inserted into HTML documents using the <img> tag. The <img> tag, at a
minimum, takes two attributes, alt and src. The alt attribute specifies text that should
be displayed in lieu of the image in nongraphical browsers (see the section “Specifying
I text to display for nongraphical browsers” later in this chapter). The src attribute tells
the user agent what image file should be displayed. For example, if you wanted to
M include the graphic cat.jpg in your document, you could use code similar to the
following:
A <img alt=“A picture of a cat” src=“cat.jpg”>
G Note The <img> tag has no closing tag. However, in XHTML the <img> tag must
be closed:
E <img alt=“A picture of a cat” src=“cat.jpg” />
S The src attribute’s value can be a file on the same Web server as the document, or
any valid URL pointing to an image on a different Web server. Just as with the anchor
tag, you can use absolute or relative URLs to specify the location of the image to
display. The reasons for using either URL are the same as the reasons for using
absolute or relative URLs in anchor tags
Image Alignment
If the user agent cannot fit the image on the current line, it will wrap it to the
I next line and follow the paragraph’s alignment and formatting.
Note how the default formatting (at least for Internet Explorer) of the image is
M to be aligned with the baseline of neighboring text. This isn’t always ideal. At
times, you will want to specify the alignment of the image as it relates to the
A text and other objects around it. Image alignment can be controlled by using
the align attribute with the <img> tag.
G
Align Attribute Values Value Function
E Top Align with the top of nearby text or object
Bottom Align with the bottom of nearby text or object
S Middle Align with the middle of nearby text or object
Left Align to the left of nearby text or object
Right Align to the right of nearby text or object
Image Alignment
However, the align attribute has been deprecated in favor of using
I styles for image alignment. The following CSS properties can be used to help
align images:
M
✦ text-align—Used in surrounding text, this property aligns the text around an
A image (versus aligning the image itself). See Chapter 8 for more information
on using the text-align property.
G
✦ float—Floats the image to the right or left of the user agent. Note that some
E user agents do not support the float property. The float property allows text
and other objects to wrap next to the image.
S
✦ vertical-align—Aligns the image vertically with neighboring text or objects.
Image Alignment
<p><img alt=“Picture of a cat” src=“cat.jpg” style=“float: right” width=“70px”>
I How does GIF work? Simply put, GIF indexes images to an 8-bit palette. The
system palette is 256 colors. Before you can save your file in GIF format, the
M utility you are using simply makes its best guess at mapping all your colors to
one of the 256 colors in an 8-bit palette. p>
A
G
E
S
I
Size and Scaling
M
You can specify the size of an image by using the height and width
A attributes of the <img> tag. These attributes accept pixel and percentage
values, allowing you to specify the exact size of an image or a size relative to
G the current size of the browser window.
E Get in the habit of always using the width and height attributes with your
<img> tags. These attributes allow the user agent to reserve the correct
S amount of space for the image while it continues to render the rest of the
document. Without these attributes, the user agent must wait for the image to
be loaded before continuing to load the rest of the document.
Image Borders
You can use CSS styles to create borders around images. Previous versions of HTML
supported a border attribute for the <img> tag, which worked similarly to the
I border attribute of the <table> tag. However, this attribute has been deprecated
for use with the <img> tag. Instead, you should use styles.
M
For example, to define a 4-pixel-wide border around an entire image, you can use the
A following code:
G <img alt=“A picture of a cat” src=“cat.jpg”

style=“border: 4px solid black;”>
E
To define a border on just the left and right sides of an image, you would use the
S following:
<img alt=“A picture of a cat” src=“cat.jpg”

style=“border-left: 4px solid black;
border-right: 4px solid black;”>
Image Borders
I Tip
M To simplify defining a different border on one side of an image, use the border
property first to define a border on all sides and then the appropriate borderside
A property for the side that is the exception, overriding the previous setting
for that side. For example, to create a border on all sides of an image except the
G right, you could specify border-top, border-bottom, border-left, and
border-right properties individually. Or, you could use just border and
E border-right:
S <img alt=“A picture of a cat” src=“cat.jpg”

style=“border-left: 4px solid black;
border-right: none;”>
Image Borders
I
M
A
G
E
S
HTML Images
I Adding pictures We will use <img> tag for adding

M picture to our page. The “img” tag with “src” attribute
specifies the name of the file.
A
G Syntax :- <img src=“file name”>
E
S
Saving Your Work
S
A
V
I
N
G
Declaration (DOCTYPE)
D
O
C
T
Y
P
E
Any
QUESTIONS?

Line, Breaks, Paragraph, Etc

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Line, Breaks, Paragraph, Etc

Uploaded by

Copyright:

Available Formats

Lines, Line Breaks

A Headings are defined with the <h1> to <h6> tags.

D  <h1> defines the most important heading.

N DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is

E In cases where you want a client browser to be able to hyphenate a word if

E Instead of defining a style for the paragraph tag,

L • HTML specifies three different types of lists:

L • Html allows you to specify different types of ordered lists by

L <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

I How many images is the right number? You might be

G <img alt=“A picture of a cat” src=“cat.jpg”

<img alt=“A picture of a cat” src=“cat.jpg”

S <img alt=“A picture of a cat” src=“cat.jpg”

I Adding pictures We will use <img> tag for adding

You might also like