04 html - basic text structure tags

8/12/2019 04 HTML - Basic Text Structure Tags

1/11

HTML Hard Coded Prepared by: Marvin De Leon

Basic Text Structure Tags

These are the tags you normally used in formatting your content to be displayon the web. Remember that all whitespaces are ignore by they browser, thats

why when you code your html document it will not appear the same as youtyped it in text editor ,even though you have set a formatting in your content.You have to use tags, specifically text structure tags which compose ofparagraphing, heading, blockquoting, preformatting text, and adding line breaks.

Paragraphs

Paragraphs in an HTML document are similar to those of a plaintext document.We use
tag to create paragraphs with a HTML document. This isespecially helpful when you are creating a large web page.
Let's say you want to create a paragraph. You start to wonder, "What happens ifI hit return at the end of every line in the paragraph? Should I make theparagraph just one long continuous line? What if I accidentally put too manyspaces between words?"

At this point, you should once again be saying to yourself: whitespace doesn'tmatter.You could put each word on its own line, and the paragraph would lookcompletely normal. In fact, no matter how much whitespace you put betweenwords, whether returns or spacebar hits, the words will be separated by onespace in a Web browser. Thats why paragraphs are use to separate lines oftext from each other.

As you might suspect, paragraphs are quite common in Web pages. They areone of the most basic structures in HTML. If you regard a document as acollection of structures and sub-structures, you may come up with somethinglike this: The beginning of a paragraph is marked by

, and the end by
.
You can align your paragraphs by using the attributeALIGN, which is place on

a

tag. In can be either left, right, or center.

My First Web Site

Page 11 of 120 Basic Text Struc ture Tags


2/11


You can also use tag to replace the because tag can be apply to both text and imageswhile the

is just for text. And you can only use that whenusing the

tag.

My First Web Site

Example of Paragraph Tag

Example of Paragraph Tag

A Preacher's Dying Wish

An old preacher was dying. He sent a message for his doctor and his lawyer, both churchmembers, to come to his home.

When they arrived, they were ushered up to his bedroom. As they entered the room thepreacher held out his hands and motioned for them to sit, one on each side of his bed. Thepreacher grasped their hands, sighed contentedly, smiled and stared at the ceiling. For atime, no one said anything.

Both the doctor and the lawyer were touched and flattered that the preacher would ask themto be with him during his final moments. They were also puzzled; the preacher had nevergiven them any indication that he particularly liked either of them. They both remembered hismany long, uncomfortable sermons about greed, covetousness and avaricious behavior thatmade them squirm in their seats.

Finally, the doctor said, "Preacher, why did you ask us to come?" The old preacher musteredup his strength, then said weakly, "Jesus died between two thieves ... and that's how I wantto go."

Note:

In this example, notice that using the

tag will simply create two line spacingin each paragraphs in the document. When you dont use any

tag on your



3/11


document, what will happen is, the ext will continue to display without any linespacing.

Headings

Headings are commonly used in HTML documents to create titles and arrangeinformation. Headings are a useful way to separate large areas of text byplacing sub-headings throughout the document. Heading commands create anice bold text.

Each heading produces a boldfaced title line followed by a paragraph break.These heading vary from size 1 (very large) to 6 (very small). There are six

levels of headings, being the largest and the smallest.

My Web SiteMy Web SiteMy Web SiteMy Web Site (default in browser)My Web SiteMy Web Site



4/11


Headings grab the users attention and separate document elements that mightotherwise flow together. The largest headline and smallest two headings arerarely used. The largest tends to overwhelm the page; the smallest two are hardto read but are convenient for authorship and copyright notices. The middlethree sizes 2, 3, and 4 are the workhorses of the heading tags and arecommonly used.

You can also use the attribute ALIGN inside the heading tag, which can beeither left, right, or center.

My Web SiteMy Web SiteMy Web Site

Example of Heading Tag

Example of Heading TagBOAT RIDEAuthor Unknown

A priest was taking a tour of biblical sites, when he came to a beach and saw a boat anda sign advertising,

"TAKE A BOAT RIDE TO THE EXACT PLACE WHERE JESUS WALKED ONWATER!!!"

Inquiring about it, he learned that the ride there was free, so he went.

After viewing it, he said to the captain of the boat, "Ok, I'm done, let's go back now." "That'llbe $35 to go back."

The priest, shocked by the charge, exclaims "Dang, no wonder Jesus got out and walked!!!"

Note:

In this example, notice that using the Heading tag will separate the some textapart. Just like the paragraph it create double space in each heading orparagraph. Also Heading tag is widely used in creating the titles. Using this tagwill make you HTML document more attractive and more distinct.



5/11


Blockquoting Text

Blockquoting is similar to the tab button on a computer keyboard; it is howHTML indents paragraphs. Blockquotes provide convenient and consistentindentation. frame the section to beindented. Indented materials can contain paragraphs and further blockquotedindentations. Blockquoting is useful for quoting a direct sour4ce within adocument.

This text will be indented because of the blockquote. This can be veryeffective when quoting a direct source.

In addition, you can create multiple levels of blockquotes. This is referred to asnesting, and enables you to indent the text as many times as you need.



6/11


This text will be indented because of the blockquote. This can be veryeffective when quoting a direct source.

This is a nested blockquote and will be indented because of theblockquote. This can be very effective when quoting a direct source.

Example of Blockquote Tag

Example of Blockquote TagA Preacher's Dying Wish

An old preacher was dying. He sent a message for his doctor and his lawyer, both churchmembers, to come to his home.
When they arrived, they were ushered up to his bedroom. As they entered the room thepreacher held out his hands and motioned for them to sit, one on each side of his bed. Thepreacher grasped their hands, sighed contentedly, smiled and stared at the ceiling. For atime, no one said anything.
Both the doctor and the lawyer were touched and flattered that the preacher would ask themto be with him during his final moments. They were also puzzled; the preacher had nevergiven them any indication that he particularly liked either of them. They both remembered hismany long, uncomfortable sermons about greed, covetousness and avaricious behavior thatmade them squirm in their seats.
Finally, the doctor said, "Preacher, why did you ask us to come?" The old preacher musteredup his strength, then said weakly, "Jesus died between two thieves ... and that's how I want
to go."



7/11


Note:

In this example, notice that using the tag will separate thesome text apart. Just like the paragraph it create double space in each headingor paragraph and also indented the text that are inside the tag. Also tag is widely used in indenting the text or makingan empahasis on a text.

Line Breaks

A line break is a commonly used tag that separates sections of text. Although itis similar to the paragraph tag, it differs in some ways. A line break,
,only

spearates text by a single line. The

tag is different because it will doublespace between each paragraph. You can easily break paragrpah line byinserting the
tag where you want the lines to end, like this:

If you want to separate line of text,
The best method to use is line breaks.



8/11


Line breaks are empty tags, so they do not require a closing tag. This makes iteasier to ensure that trhey are used effectively. You can use the
tagconsecutively to get a desired amount of space between text. For example, ifyou wan to create five lines of space between paragraphs:

Your first paragraphs would go here.

Your second paragraphs would go here.

Example of Line Break Tag

Example of Line Break TagBOAT RIDEAuthor Unknown

A priest was taking a tour of biblical sites, when he came to a beach and saw a boat and asign advertising,

"TAKE A BOAT RIDE TO THE EXACT PLACE WHERE JESUS WALKED ON WATER!!!"

Inquiring about it, he learned that the ride there was free, so he went.

After viewing it, he said to the captain of the boat, "Ok, I'm done, let's go back now." "That'llbe $35 to go back."

The priest, shocked by the charge, exclaims "Dang, no wonder Jesus got out and walked!!!"

Note:

In this example, notice that using the
tag will separate the some textapart. Just like the paragraph it create but this time only single space whenusing the
tag. Also
tag is widely used in placing single line break oftext.



9/11


Preformatted Text

In previous lessons we have seen that a web browser will ignore extraneousspace characters, tabs, and carriage returns in your HTML files. However, thereare some instances where it will be important to maintain these aspects of pagelayout. In this lesson, the example will be where we want to insert a table of textwith aligned columns.

The tag instructs your web browser to display the text exactlyas typed in the HTML document, including spaces, tabs, and carriage returns. Abrowser typically displays such text as a monospaced type, meaning a font inwhich every character has the same width.

H T M L Basic By: Marvin

De Leon



10/11


Example of Preformatted Text Tag

Example of Preformatted Text Tag

B o A t R i D eAuthor Unknown

A priest was taking a tour of biblical sites,when he came to a beach and saw a boat anda sign advertising,

"TAKE A BOAT RIDE TO THE EXACT PLACE WHERE JESUS WALKED ON WATER!!!"

Inquiring about it, he learned that the ride there wasfree, so he went.

After viewing it, he said to the captain of the boat,"Ok, I'm done, let's go back now.""That'll be $35 to go back."

The priest, shocked by the charge, exclaims"Dang, no wonder Jesus got out and walked!!!"

Note:

In this example, notice that using the tag it will simply display exactlywhat you have type in your text editor. Here adding single space or doublespace are no problem. Even placing so many letter spaces are no problem.

Another this is the text font will be in monospaced.



11/11



04 html - basic text structure tags

Documents