line, breaks, paragraph, etc

8/6/2019 Line, Breaks, Paragraph, etc

1/67


2/67

Lines, Line Breaks

& Paragraph


3/67

O

BJ

E

C

T

I

V

ES

CHAPTER Objectives

to examines block elements in detail.

to know the three different list types in HTML: numbered,

bulleted, and definition. Learned how to define and

format each type of list and how you can nest lists for

more flexibility.

to know various image formats supported natively by most useragents and how to incorporate them into Web documents.


4/67

H

E

A

DI

N

G

S

HTML Headings

Headings are important in HTML documents.

Headings are defined with the to tags.

defines the most important heading.

defines the least important heading.


5/67

Chapter 4

H

E

A

DI

N

G

S

HTML Headings

Headings Are Important

Use HTML headings for headings only. Don't use headings to make text

BIG or bold.

Search engines use your headings to index the structure and content of

your web pages.

Since users may skim your pages by its headings, it is important to use

headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings,

then the less important H3 headings, and so on.


6/67

L

I

NE

S

HTML Lines

HTMLLines

The tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:


7/67

CO

M

ME

N

T

S

HTML Comments

HTML Comments

Comments can be inserted into the HTML code to make it more

readable and understandable. Comments are ignored by the browser and arenot displayed.

Comments are written like this:


8/67

TRY it in

YOURSELF


9/67

T

R

Y

I

T

HTML Headings

HeadingsHow to display headings in an HTML document.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6


10/67

T

R

Y

I

T

HTML Comments

This is a regular paragraph

Hidden commentsHow to insert comments in the HTML source code.


11/67

T

R

Y

I

T

HTML Lines

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

Horizontal lines

How to insert a horizontal line.


12/67

L

IN

E

B

R

E

AK

S

HTML
Tag

Definitionand Usage

The
tag inserts a single line break.

The
tag is an empty tag which means that it has no end tag.

Browser Support

The
tag is supported in all major browsers.

Differences BetweenHTMLand XHTML

In HTML the
tag has no end tag.

In XHTML the
tag must be properly closed, like this:
.


13/67


14/67

P

A

R

A

GR

A

PH

HTML Paragraph

Paragraphs

In HTML, paragraphs are delimited by the paragraph tag,

. The

paragraph tag controls the line spacing of the lines within the paragraph as well as

the line spacing between paragraphs. The default spacing is single space within theparagraph, and double-space between paragraphs.

Each paragraph in your document should start with an opening

paragraph tag (

) and end with a closing paragraph tag (
)


15/67

P

A

R

A

GR

A

PH

HTML Paragraph

tag (paragraph tag)

This tag indicates the beginning of a new paragraph.
is
optional.We can align the paragraph in 4 ways by the following

------

------

------

------


16/67

Q

UO

T

E

D

T

EX

T

HTML QuotedText

The tag is used to delimit blocks of quoted text. For

example, the following code identifies the beginning paragraph of

the Declaration of Independence as a quote:


17/67

TRY it in

YOURSELF


18/67

T

R

Y

I

T

HTML
tag

A line break is marked up as follows:

To break
lines
in a
paragraph,
use the br element.


19/67

T

R

Y

I

T

HTML ParagraphA paragraph is marked up as follows:

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

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.


20/67

HY

P

H

E

N

S

Soft HyphensOccasionally, you will want to allow a browser to hyphenate long words to

better

justify a paragraph. For example, consider the following code

The morbid fear of the number 13, or

triskaidekaphobia, has plagued some important historic figures like Mark

Twain

and Napoleon.

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

behyphenated. Using the preceding example, you can hyphenate the word

triskaidekaphobia with soft hyphens:

The morbid fear of the number 13, ortriskaidekaphobia, has plagued some important historic

figures like Mark Twain and Napoleon.


21/67

R

E

E

LE

M

EN

T

Preserving FormattingThe Element

Sometimes you will want the client browser to interpret your

text literally, including the white space and forced formatting (line

breaks, and so on). In those cases, you can use the preformatted tag

().

The preformatted tag tells the client browser that the text

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

rendered in a mono space font.


22/67

I

N

D

EN

T

S

IndentsOccasionally, you will want to indent the first line of paragraphs inyour documents.

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

paragraphs to be indented by half an inch, you would use a style

similar to the following:

p { text-indent: .5in; }


23/67

I

N

D

EN

T

S

First Line Indents

p{ text-indent: 0.5in; }

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

of the earth, the separate and equal station to which the Laws of Nature and of Natures God entitlethem, a decent respect to the opinions of mankind requires that they should

declare the causes which impel them to the separation.

We hold these truths to be self-evident, that all men are created equal, that they are endowed by

theirCreator 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

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 toinstitute 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...


24/67

D

I

V

E

LE

M

EN

T

The tag is used to

delimit divisions of a document, which can include several

paragraphs or other

block elements.

Instead of defining a style for the paragraph tag,

define it as an unattached class (one

without a specified element) and use it with the tag.

DIV Elements


25/67

D

I

V

E

LE

M

EN

T

Division Borders withDivision Tags

.indent-highlight { padding-left: 50px;

padding-right: 50px; border: solid 3px; }

For the first few days I could not feed in peace; but as I found that this terrible creaturenever 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.

Since then I have seen many horses much alarmed and

restive at the sight or sound of a steam engine; but thanks

to my good masters care, I am as fearless at railway

stations as in my own stable.

Now if any one wants to break in a young horse well, that

is the way.


26/67

E

N

T

I

TI

E

S

HTML Special Characters (Entities)

y Some special characters must be referenced directly instead of simply

typed into the document.

y Some of these characters cannot be typed on a standard keyboard, such as

the trademark symbol ()

y or copyright symbol();

y others could cause the HTML client confusion(such as the angle brackets,

).

y Such characters are common referred to as entities.

y Entities are referenced by using a particular code in your documents.

y This code always begins with an ampersand(&)

y and ends with a semicolon. only referred to as entities.


27/67

E

N

T

I

TI

E

S

Three different ways to specify an entity exist:

A mnemonic code(such as copy for the copyright symbol

A decimal value corresponding to the character(such as #169

for a copyright symbol)

A hexidecimal value corresponding to the character(such as

#xA9 for a copyright symbol)


28/67

E

N

T

I

TI

E

S

The following are all examples of valid entities:

A non-breakingspace(see later)

Example Ordered List - Letters

In Internet Explorer, open the Web page that displays

the graphic you wish to use as wallpaper for your

desktop.

Right-click on the image to open the context menu.

Choose Set as Background to save the image and use it

as your desktop wallpaper.


36/67

L

I

S

TS

HTML UnorderedList

Unordered listListing 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

enclosed between and .

Example: Rama. Raghu. Sita. Out

By specifying the type it will display round or square bullet.

Ex:-

Ex:-

put:- Rama. Raghu. Sita.


37/67

L

I

S

TS

HTML UnorderedList

Example Unordered List

Vanilla

Chocolate

Strawberry


38/67

L

I

S

TS

HTML DefinitionList

Definition list It is used for defining the terms. Here all the definitions must

be enclosed between and .

Each definition is preceded by definition term tag The description of

the definition is preceded by

Example

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.

Output: dir this command is used to list the files and directories. copy thiscommand is used to copy the contents from one file to another.


39/67

L

I

S

TS

HTML DefinitionList

Example Definition List

Internet Explorer

Developed by Microsoft, an integral piece of Windows

products.Mozilla

Developed by the Mozilla Project, an open source

browser for multiple platforms.

Netscape

Developed by Netscape Communications Corporation, one

of the first graphical browsers.

Safari

Developed by Apple Computer, Inc, forApples OSXoperating system.


40/67

L

I

S

TS

HTML NestedListNested Lists

You can nest lists of the same or different types. For example, suppose you

have abulleted list and need a numbered list beneath one of the items, as

shown:

Send us a letter detailing the problem. Be sure to include the following:

1. Your name

2. Your order number3. Your contact information

4. A detailed description of the problem


41/67

L

I

S

TS

HTML NestedListIn such a case, you would nest an ordered list inside an unordered one, as shown in

the following code:

Example Definition List

Send us a letter detailing the problem. Be sure to

include the following:

Your name.

Your order number.

Your contact information.

A detailed description of the problem.


42/67

IMAGES


43/67

IM

A

G

E

S

HTML Image Format

Image Formats for the Web

Most user agents support, to some degree, three graphics file

formats: GIF, JPEG, and PNG. The GIF and JPEG formats have

been supported for quite some time (since the origin of the

Web), while PNG is relatively new. This section covers the

basics of the image formats.


44/67

IM

A

G

E

S

GIF

GIF was the earliest format in use in inline images onthe Web. Version 1 browsers could open GIF images

inline, but required that JPEG images be opened out-

of-line.GIF uses a compression schemecalled LZW

compressionthat predates CompuServe, even

though you might see it called CompuServe GIF.

CompuServe implemented LZW compression, thinking

it was in the public sphere and then found out it wasproprietary. A lot of lawyers sorted it out.

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 utility

you are using simply makes its best guess at mapping

all your colors to one of the 256 colors in an 8-bitpalette.


45/67

IM

A

G

E

S

JPEG

JPEG takes a different approach. JPEG stands for

the Joint Photographic Experts Group, the name ofthe group that created the standard. With JPEG, you

get to keep all your colors, but you dont get to keep

all the data about the image. What kinds of images

lend themselves to being compressed with JPEG? A

tree. If you take a photo of a pine tree, the acorns are

in specific places, but when the image is compressedand decompressed (opened on your Web page), the

computer has to approximate where those acorns

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 ofthe color loss.


46/67

IM

A

G

E

S

PNG

The Portable Network Graphics, or PNG format,was developed exclusively for the Web and is in

the public domain. The PNG format takes

advantage of a clever way of storing the

information about the image so you dont lose

color and you dont lose image quality; it is a

lossless format. The only drawback is, becausethe standard is so new, only fourth-generation and

later browsers support PNG graphics. Eventually,

PNG will replace GIFs for many color-rich, still

image files. Only GIFs can support

animation and transparency.


47/67

IM

A

G

E

S

Enhancing downloading speed

What can you do to ensure your pages download quickly? There are a few things: Limit image file sizes.

Limit the number of images.

Reuse images as much as possible so images can be loaded from cache.

Use frames so only part of the browser windows need to reload.

Use text rather than images, where possible.

Image file sizes

You can limit image file sizes by doing the following:

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 doesntdominate the page will look huge and overbearing at 640 480.


48/67

IM

A

G

E

S

Number of images

How many images is the right number? You might besurprised to learn that sometimes very small images with white

space between them load faster than one large image.

Take advantage of white space to contribute to your

images. You can use two intelligent techniques to get more image

for the byte. By changing the background color to match thebackground color of your images, you can keep your images

smaller. By anti-aliasing the text against that background to blend

the edges into the background color, you can achieve the look of

one large graphic with multiple small, fast-loading images


49/67

IM

A

G

E

S

Inserting an ImageImages are inserted into HTML documents using the tag. The 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

text to display for nongraphical browsers later in this chapter). The src attribute tellsthe user agent what image file should be displayed. For example, if you wanted to

include the graphic cat.jpg in your document, you could use code similar to the

following:

Note The tag has no closing tag. However, in XHTML the tag must

be closed:

The src attributes 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


50/67

IM

A

G

E

S

Image Alignment

If the user agent cannot fit the image on the current line, it will wrap it to the

next line and follow the paragraphs alignment and formatting.Note how the default formatting (at least for Internet Explorer) of the image is

to be aligned with the baseline of neighboring text. This isnt always ideal. At

times, you will want to specify the alignment of the image as it relates to the

text and other objects around it. Image alignment can be controlled by using

the align attribute with the tag.

Align Attribute Values Value FunctionTop Align with the top of nearby text or object

Bottom Align with the bottom of nearby text or object

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


51/67

IM

A

G

E

S

Image Alignment

However, the align attribute has been deprecated in favor of using

styles for image alignment. The following CSS properties can be used to helpalign images:

text-alignUsed in surrounding text, this property aligns the text around an

image (versus aligning the image itself). See Chapter 8 for more information

on using the text-align property.

floatFloats the image to the right or left of the user agent. Note that someuser agents do not support the float property. The float property allows text

and other objects to wrap next to the image.

vertical-alignAligns the image vertically with neighboring text or objects.


52/67

IM

A

G

E

S

Image Alignment

How does GIF work? Simply put, GIF indexes images to an 8-bit palette. Thesystem 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. p>


53/67

IM

A

G

E

S

Size and Scaling

You can specify the size of an image by using the height and width

attributes of the tag. These attributes accept pixel and percentage

values, allowing you to specify the exact size of an image or a size relative to

the current size of the browser window.

Get in the habit of always using the width and height attributes with your

tags. These attributes allow the user agent to reserve the correct

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.


54/67

IM

A

G

E

S

Image BordersYou can use CSS styles to create borders around images. Previous versions of HTML

supported a border attribute for the tag, which worked similarly to the

border attribute of the tag. However, this attribute has been deprecatedfor use with the tag. Instead, you should use styles.

For example, to define a 4-pixel-wide border around an entire image, you can use the

following code:

To define a border on just the left and right sides of an image, you would use the

following:


55/67

IM

A

G

E

S

Image Borders

Tip

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

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

right, you could specify border-top, border-bottom, border-left, and

border-right properties individually.Or, you could use just border andborder-right:


56/67

IM

A

G

E

S

Image Borders


57/67

I

N

L

I

N

E

EL

E

M

E

N

T

HTML Inline Elements: Markup forCharacters

The finest level of markup possible in HTML is at the

character level; just as in a word processor, you can affect

formatting on individual characters. This section covers the

basics of inline formatting.


58/67


59/67

I

N

L

I

N

E

T

A

G

S

HTML Basic Inline Tags

---- it displays the text in bold.

--- it displays the text with underline.

---- it displays the text in italic.

----- it places the text in center of the page. -----Emphasized text

--------- Strong text

------Teletype(mono spaced)text


60/67

I

N

L

I

N

E

T

A

G

S

HTML Big Tag

It displays the text in a font larger than the normal.

It ends with .

Ex:

this is my home page


61/67

I

N

L

I

N

E

T

A

G

S

HTML Small Tag

It displays the text in a font smaller than the normal.

Ex:- this is my own page


62/67

C

O

L

OR

S

Adding Colors to the document

Adding Colors to the document Bg color attribute:- This attribute isused with the tag to specify the background color for the image.

It allows 16 colors like black, green, silver, white, maroon, red,

yellow, purple, grey, lime, olive, blue etc,

Ex:-


63/67

M

A

R

Q

UE

E

HTML Marquee> tag

tag This tag makes the text to

scroll from one end of the window to other, It ends

with tag.

Ex:- Sample


64/67

IM

A

G

E

S

HTML Images

Adding pictures We will use tag for adding

picture to our page. The img tag with src attribute

specifies the name of the file.

Syntax :-


65/67

S

A

V

I

NG

Saving Your Work


66/67

DO

C

T

Y

P

E

Declaration (DOCTYPE)


67/67

Any

QUESTIONS?

line, breaks, paragraph, etc

Documents