+ All Categories
Home > Education > Html web designing enhancing text

Html web designing enhancing text

Date post: 13-Dec-2014
Category:
Upload: bong-francisco-jr
View: 952 times
Download: 1 times
Share this document with a friend
Description:
This slide presentation was created for BBEMNHS students references.
Popular Tags:
21
CHAPTER 6 ENHANCING TEXT Unit II DESIGNING STATIC PAGES USING HTML
Transcript
Page 1: Html web designing enhancing text

CHAPTER 6ENHANCING TEXT

Unit IIDESIGNING STATIC PAGES USING HTML

Page 2: Html web designing enhancing text

TWO TYPES OF ENHANCING TEXT FORMATTING

Logical Formatting- the appearance of the text is controlled by the browser being used.

Physical Formatting- Allows you to tell specifically the browser what font, color or style it will use to display the text.

Page 3: Html web designing enhancing text

LOGICAL FORMATTING

EMPHASIZING TEXT <EM> tags are displayed in italics.

STRONG TEXT <STRONG> tags are displayed in boldface.

Page 4: Html web designing enhancing text

CASCADING TAGSHTML tags can be cascaded when you are

using two or more tags to take effect on the same text area.

</Tag 1><Tag 1>

</Tag 2>

<Tag 2>

CORRECT

<Tag 1>

</Tag 2>

</Tag 1><Tag 2>

INCORRECT

Note: The last tag used is the first tag to be closed when tags are cascaded

Page 5: Html web designing enhancing text

PUTTING QUOTES

In HTML, you can tell the browser that a particular content is a quote. To do this, you enclosed the content with the <BLOCKQUOTE> </BLOCKQUOTE> tag pair.

EX.<BLOCKQUOTE>It’s only too late if you

don’t start now.</BLOCKQUOTE>Note: You can add other HTML tags.

Page 6: Html web designing enhancing text

PHYSICAL FORMATTING TAGS

TAGS EFFECT

<B> Bold Text

<I> Italicized Text

<U> Underlined text

<SUP> Superscripted text

<SUB> Subscripted text

<BLINK> Blinking Text

<CENTER> Centered Text

<BIG> and <SMALL> Make text all caps and small caps

Page 7: Html web designing enhancing text

PREFORMATTING TEXT

There are times when you want the browser to display your text exactly how you typed them in your code. Remember HTML displays contents in the browser as flowing text, and that no matter how much space you put or how many times you press Enter to move your text to the next line, the contents will not displayed as such. You have to use the <PRE> tags in order to achieve such format.

Page 8: Html web designing enhancing text

FONT ATTRIBUTES

FONT FACE- font name is the font style you want to use. Like ARIAL, TIMES NEW ROMAN

SIZE- n is the font size, an attribute that is fixed value, such as 32.

COLOR- ncolor is the font color, a six character code that display 216 web safe colors.

Page 9: Html web designing enhancing text
Page 10: Html web designing enhancing text
Page 11: Html web designing enhancing text
Page 12: Html web designing enhancing text

HANDLING THE FONT

Change the properties of the font by using the <FONT> tag.

TAG EFFECT

<FONT FACE= font name> Change the font face

<FONT SIZE= n> Change the font size

<FONT COLOR= ncolor> Change the font color

<FONT FACE=font name SIZE=n COLOR= ncolor>

Change the font face, size and color.

Note: Uses only 2 to 3 styles or font face: Consider the harmony and meaning when using colors.

Page 13: Html web designing enhancing text

TEXT ALIGNMENT

Arranging text or paragraph using <ALIGN> tag.

TAG EFFECT

<H1 ALIGN= CENTER> Header 1 aligned center

<P ALIGN= CENTER> Paragraph is aligned center

<H1 ALIGN= RIGHT> Header 1 aligned right

<P ALIGN= RIGHT> Paragraph aligned right

<H1 ALIGN=LEFT> Header 1 aligned left

<P ALIGN=LEFT> Paragraph is aligned left

Page 14: Html web designing enhancing text
Page 15: Html web designing enhancing text
Page 16: Html web designing enhancing text
Page 17: Html web designing enhancing text
Page 18: Html web designing enhancing text
Page 19: Html web designing enhancing text
Page 20: Html web designing enhancing text
Page 21: Html web designing enhancing text

Recommended