Embed Size (px)
Citation preview
CONTENTS INCLUDES :-CONTENTS INCLUDES :-
TEXT LAYOUT SKILLSTEXT LAYOUT SKILLS FONTS EFFECTFONTS EFFECT HEADING ON WEB PAGESHEADING ON WEB PAGES IMAGE / PICTURE IMAGE / PICTURE
2.3 HTML Text2.3 HTML Text• Layout TagsLayout Tags
<BR> Break Line<BR> Break Line
……………………………………<BR><BR>
To force a line of text to break up where it is placed.To force a line of text to break up where it is placed.
Tag format
<! - - =============================================== - - ><! - - Line break - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Line Break Utilization </TITLE></HEAD> <BODY>
Ding Ding Dong <BR>Here comes the Santa Clause <BR> Ding Ding Dong <BR>Merry Christmas <BR>
</BODY></HTML>
<NOBR> No Break Line<NOBR> No Break Line
<NOBR>…………………</NOBR><NOBR>…………………</NOBR>
It’s capable of turning of the function of break line.It’s capable of turning of the function of break line.
Tag format
<! - - =============================================== - - ><! - - No Line break - - ><! - - =============================================== - - ><HTML><HEAD><TITLE> Line Break Utilization </TITLE></HEAD><BODY> <NOBR>
Ever eating, never cloying, All-devouring, all-destroying, Never finding full repast, Till I eat the world at last.-- Jonathan Swift "Time"
</NOBR></BODY></HTML>
<P> Paragraph<P> Paragraph
<P>…………………</P><P>…………………</P>
Split the paragraph into two by inserting a line break and.Split the paragraph into two by inserting a line break and.
Tag format
<! - - =============================================== - - ><! - - Paragraph - - ><! - - =============================================== - - ><HTML><HEAD><TITLE> Paragraph Document </TITLE></HEAD><BODY>
<NOBR>Ever eating, never cloying, <BR>All-devouring, all-destroying, <P>Never finding full repast, <BR>Till I eat the world at last. <P>- - Jonathan Swift "Time"</NOBR>
</BODY></HTML>
Letter –Spacing Mark Letter –Spacing Mark
   ;;
To create spacing among words or letter.To create spacing among words or letter.
Tag format
<! - - =============================================== - - ><! - - Letter spacing mark - - ><! - - =============================================== - - ><HTML><HEAD><TITLE> Letter- spacing mark </TITLE></HEAD><BODY>
--Jonathan Swift "Time" <BR>Ever eating never cloying, <BR>All-devouring all-destroying, <P>Never finding full repast, <BR>Till I eat the world at last. <P>
</BODY></HTML>
<CENTER> Center Alignment <CENTER> Center Alignment
<CENTER>…………………</CENTER><CENTER>…………………</CENTER>
To center the text horizontally across the display window.To center the text horizontally across the display window.
Tag format
<! - - =============================================== - - ><! - - Center Alignment - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Center Alignment </TITLE></HEAD><BODY>
<CENTER>--Jonathan Swift "Time"<BR>Ever eating; never cloying, <BR>All-devouring; all-destroying, <BR>Never finding; full repast, <BR>Till I eat the world at last. <BR></CENTER>
</BODY></HTML>
<BLOCKQUOTE> Indentation <BLOCKQUOTE> Indentation
<BLOCKQUOTE>…………………</ BLOCKQUOTE ><BLOCKQUOTE>…………………</ BLOCKQUOTE >
The text will indent five blank letter toward the right.The text will indent five blank letter toward the right.
Tag format
<! - - =============================================== - - ><! - - Indentation - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Indentation </TITLE></HEAD><BODY>
Ever eating; never cloying, <BLOCKQUOTE>All-devouring; all-destroying, </BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>Never finding; full repast, </BLOCKQUOTE></BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>Till I eat the world at last. </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</BODY></HTML>
<H> Heading tags <H> Heading tags
<Hx>……………</ Hx > x=1,2,3,4,5,6<Hx>……………</ Hx > x=1,2,3,4,5,6 Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading defines the smallest heading ..
Tag format
<! - - =============================================== - - ><! - - Heading Style - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Heading Style </TITLE></HEAD><BODY>
<H1>Heading 1</H1><H2>Heading 2</H2><H3>Heading 3</H3><H4>Heading 4</H4><H5>Heading 5</H5><H6>Heading 6</H6>Common Font size
</BODY></HTML>
• Heading ormatHeading ormat
<H> Heading Alignment <H> Heading Alignment
ALIGN = “LEFT” / “CENTER” / “RIGHT”ALIGN = “LEFT” / “CENTER” / “RIGHT” To control the alignment style of headingTo control the alignment style of heading
Tag format
<! - - =============================================== - - >
<! - - Heading Alignment - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Heading Alignment </TITLE></HEAD><BODY>
<H1 ALIGN="RIGHT">HEADING ALIGNMENT TO RIGHT</H1><H2 ALIGN="CENTER">HEADING ALIGNMENT TO CENTER</H2><H3 ALIGN="LEFT">HEADING ALIGNMENT TO LEFT</H3>
</BODY></HTML>
<STRONG>, <B> Boldface <STRONG>, <B> Boldface
<STRONG>………….</STRONG> / <B>…………..</B><STRONG>………….</STRONG> / <B>…………..</B> To display a text in a bold font.To display a text in a bold font.
Tag format
<! - - =============================================== - - >
<! - - Bold-faced Test - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Bold-Face Test </TITLE></HEAD><BODY>
<H2>Jonathan Swift "Time"</H2>Ever eating; never cloying, <BR>All-devouring; all-destroying, <BR><strong>Never finding; full repast,</strong><BR><B>Till I eat the world at last.</B> <BR>
</BODY></HTML>
• FONT EFFECTSFONT EFFECTS
<EM>, <I>, <CITE> <EM>, <I>, <CITE>
<EM>.….</EM> / <I>…..</I> / <CITE>………</CITE><EM>.….</EM> / <I>…..</I> / <CITE>………</CITE> To display a standard text turn into a italics text.To display a standard text turn into a italics text.
Tag format
<! - - =============================================== - - >
<! - - Italics Test - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Italics Test </TITLE></HEAD><BODY>
<H2><I>Jonathan Swift "Time"</I></H2><CITE>Ever eating</CITE>; never cloying, <BR>All-devouring; all-destroying, <BR><strong><EM>Never finding; full repast,</EM></strong><BR>Till I eat the world at last. <P>
</BODY></HTML>
<U> Underline <U> Underline
<U>.…………………………….</U> <U>.…………………………….</U> To display a standard text turn into underlined the enclosed text.To display a standard text turn into underlined the enclosed text.
Tag format
<! - - =============================================== - - >
<! - - Underline Test - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Underline Test </TITLE></HEAD><BODY>
<H2><I><U>Jonathan Swift "Time“</U></I></H2><CITE>Ever eating</CITE>; never cloying, <BR>All-devouring; all-destroying, <BR><strong><EM>Never finding; full repast,</EM></strong><BR>Till I eat the world at last. <P>
</BODY></HTML>
<STRIKE> Strike-Trough Format <STRIKE> Strike-Trough Format
<STRIKE>.…………………………….</STRIKE> <STRIKE>.…………………………….</STRIKE> To display a result in the enclosed text in a strikethrough format.To display a result in the enclosed text in a strikethrough format.
Tag format
<! - - =============================================== - - >
<! - - strikethrough Test - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> strikethrough Test </TITLE></HEAD><BODY>
<H2><I><U>Jonathan Swift "Time“</U></I></H2><CITE>Ever eating</CITE>; never cloying, <BR><STRIKE>All-devouring; all-destroying</STRIKE>, <BR><strong><EM>Never finding; full repast,</EM></strong><BR>Till I eat the world at last. <P>
</BODY></HTML>
<BLINK> Blinking Text <BLINK> Blinking Text
<STRIKE>.…………………………….</STRIKE> <STRIKE>.…………………………….</STRIKE> To display a result in the text of blinking in on and off.To display a result in the text of blinking in on and off.
Tag format
<! - - =============================================== - - >
<! - - Blinking Text - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Blinking Text </TITLE></HEAD><BODY>
<H2><I><U><BLINK>Jonathan Swift "Time“</BLINK></U></I></H2><CITE>Ever eating</CITE>; never cloying, <BR><STRIKE>All-devouring; all-destroying</STRIKE>, <BR><strong><EM>Never finding; full repast,</EM></strong><BR>Till I eat the world at last. <P>
</BODY></HTML>
<BIG> BigFont <BIG> BigFont
<BIG>.…………………………….</BIG> <BIG>.…………………………….</BIG> To display a result in the enclosed text to be one size bigger than standard sizeTo display a result in the enclosed text to be one size bigger than standard size
Tag format
<! - - =============================================== - - >
<! - - Big Font - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Big Font </TITLE></HEAD><BODY>
<BIG>Jonathan Swift "Time"</BIG><BR>Ever eating; never cloying, <BR><BIG>All-devouring</BIG>; all-destroying, <BR>Never finding; full repast,<BR>Till I eat the world at last.
</BODY></HTML>
<SMALL> Small Font <SMALL> Small Font
<BIG>.…………………………….</BIG> <BIG>.…………………………….</BIG> To display a result in the enclosed text to be one size smaller than standard type sizeTo display a result in the enclosed text to be one size smaller than standard type size
Tag format
<! - - =============================================== - - >
<! - - Small Font - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Small Font </TITLE></HEAD><BODY>
<SMALL>Jonathan Swift "Time"</SMALL><BR>Ever eating; never cloying, <BR><SMALL>All-devouring</SMALL>; all-destroying, <BR>Never finding; full repast,<BR>Till I eat the world at last.
</BODY></HTML>
<SUB> Subscript <SUB> Subscript
<SUB>.…………………………….</SUB> <SUB>.…………………………….</SUB> To display a result in the enclosed text as subscript, which will appear a bit lower than standard To display a result in the enclosed text as subscript, which will appear a bit lower than standard
text height.text height.
Tag format
<! - - =============================================== - - >
<! - - Subscript Text - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Subscript Text </TITLE></HEAD><BODY>
<H1>H<SUB>2</SUB>O</H1>
</BODY></HTML>
<SUP> Superscript <SUP> Superscript
<SUP>.…………………………….</SUP> <SUP>.…………………………….</SUP> To display a result in the enclosed text as superscript, which will appear a bit higher than To display a result in the enclosed text as superscript, which will appear a bit higher than
standard text height.standard text height.
Tag format
<! - - =============================================== - - >
<! - - Superscript Text - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Superscript Text </TITLE></HEAD><BODY>
<H1>X<SUP>2</SUP>+Y<SUP>2</SUP></H1>
</BODY></HTML>
<BASEFONT> Default Font <BASEFONT> Default Font
<BASEFONT SIZE=N> N = 1 TO 7 <BASEFONT SIZE=N> N = 1 TO 7 The N value lies between 1 between 7, which are font sizes in a HTML document. The default The N value lies between 1 between 7, which are font sizes in a HTML document. The default
font size is 3, if no other font size is specified. font size is 3, if no other font size is specified.
Tag format
<! - - =============================================== - - >
<! - - BASEFONT - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> BASEFONT </TITLE></HEAD><BODY>
Ever eating; never cloying,<BR><BASEFONT SIZE=5>All-devouring; all-destroying,<BR><BASEFONT SIZE=3>Never finding; full repast,<BR><BASEFONT SIZE=2>ill I eat the world at last.<BR>
</BODY></HTML>
<HR /> Horizontal Rules <HR /> Horizontal Rules
<HR /> <HR /> The <hr /> tag used to separate parts of your page with a horizontal rule. Like the line break The <hr /> tag used to separate parts of your page with a horizontal rule. Like the line break
tag ot doesn’t have a closing tag.tag ot doesn’t have a closing tag.
Tag format
<! - - =============================================== - - >
<! - - Horizontal Rules - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Horizontal Rules </TITLE></HEAD><BODY>
Ever eating; never cloying,<BR><hr />All-devouring; all-destroying,<BR><hr />Never finding; full repast,<BR><hr />ill I eat the world at last.<BR><hr />
</BODY></HTML>
<!--……..--> Comment tag <!--……..--> Comment tag
<!--………………...--><!--………………...-->
The comment tag is used to insert a comment in the HTML source code. A comment will be The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date..when you edit the source code at a later date..
Tag format
<! - - =============================================== - - >
<! - - Comment Tag - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Comment Tag </TITLE></HEAD><BODY>
Comment Tag</BODY></HTML>
<FONT> Changing Font Size <FONT> Changing Font Size
<FONT SIZE = N> ……………… </FONT><FONT SIZE = N> ……………… </FONT> To display a font size in N value which is N = 1 between 7 or others.To display a font size in N value which is N = 1 between 7 or others.
Tag format
<! - - =============================================== - - >
<! - - Changing Font Size - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Changing Font Size </TITLE></HEAD><BODY>
<FONT SIZE=6>YorVic</FONT><FONT SIZE=5>Language</FONT><FONT SIZE=4>Information</FONT><FONT SIZE=3>Studio</FONT><FONT SIZE=4>A</FONT><FONT SIZE=5>B</FONT><FONT SIZE=6>C</FONT>
</BODY></HTML>
• CHANGING FONT SETTINGCHANGING FONT SETTING
<! - - =============================================== - - >
<! - - Changing Font Size (II) - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Changing Font Size (II) </TITLE></HEAD><BODY>
<FONT SIZE=+3>YorVic</FONT><FONT SIZE=+2>Language</FONT><FONT SIZE=+1>Information</FONT>Studio<FONT SIZE=+1>A</FONT><FONT SIZE=+2>B</FONT><FONT SIZE=+3>C</FONT>
</BODY></HTML>
<FONT> Changing Font Color <FONT> Changing Font Color
<FONT COLOR = #VALUE> ……………… </FONT><FONT COLOR = #VALUE> ……………… </FONT> The [#) number sign must placed before a VALUE. The VALUE figures are any combination of The [#) number sign must placed before a VALUE. The VALUE figures are any combination of
0’s and F’s such as 000000 to FFFFFF.0’s and F’s such as 000000 to FFFFFF.
Tag format
<! - - =============================================== - - >
<! - - Using Different Colors - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Using Different Colors </TITLE></HEAD><BODY><CENTER>
<FONT COLOR=#0000FF>Jonathan Swift "Time"</FONT><BR> <!-- BLUE --><FONT COLOR=#00FF00>Ever eating; never cloying,</FONT><BR> <!-- GREEN --><FONT COLOR=#FF0000>All-devouring; all-destroying,</FONT><BR> <!-- RED --><FONT COLOR=#000000>Never finding; full repast,</FONT><BR> <!-- BLACK --><FONT COLOR=#FFFF00>Till I eat the world at last.</FONT><BR> <!-- YELLOW -->
</CENTER></BODY></HTML>
• CHANGING FONT COLORCHANGING FONT COLOR
<FONT> Font size working with color <FONT> Font size working with color
<FONT SIZE = N COLOR = #VALUE> ……… </FONT><FONT SIZE = N COLOR = #VALUE> ……… </FONT>
The combination of font size and font color. The combination of font size and font color.
Tag format
<! - - =============================================== - - >
<! - - Font Size and Color Test - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Font Size and Color Test </TITLE></HEAD><BODY><CENTER>
<FONT SIZE=5 COLOR=#0000FF>Jonathan Swift "Time"</FONT><BR> <!-- BLUE --><FONT SIZE=9 COLOR=#00FF00>Ever eating; never cloying,</FONT><BR> <!-- GREEN --><FONT SIZE=2 COLOR=#FF0000>All-devouring; all-destroying,</FONT><BR> <!-- RED --><FONT SIZE=7 COLOR=#000000>Never finding; full repast,</FONT><BR> <!-- BLACK --><FONT SIZE=6 COLOR=#FFFF00>Till I eat the world at last.</FONT><BR> <!-- YELLOW -->
</CENTER></BODY></HTML>
• FONT SIZE WORKING WITH COLORSFONT SIZE WORKING WITH COLORS
<FONT> Font size working with color <FONT> Font size working with color
<FONT SIZE = N COLOR = #VALUE> ……… </FONT><FONT SIZE = N COLOR = #VALUE> ……… </FONT>
The combination of font size and font color. The combination of font size and font color.
Tag format
<! - - =============================================== - - >
<! - - Font Size and Color Test - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Font Size and Color Test </TITLE></HEAD><BODY><CENTER>
<FONT SIZE=5 COLOR=#0000FF>Jonathan Swift "Time"</FONT><BR> <!-- BLUE --><FONT SIZE=9 COLOR=#00FF00>Ever eating; never cloying,</FONT><BR> <!-- GREEN --><FONT SIZE=2 COLOR=#FF0000>All-devouring; all-destroying,</FONT><BR> <!-- RED --><FONT SIZE=7 COLOR=#000000>Never finding; full repast,</FONT><BR> <!-- BLACK --><FONT SIZE=6 COLOR=#FFFF00>Till I eat the world at last.</FONT><BR> <!-- YELLOW -->
</CENTER></BODY></HTML>
• FONT SIZE WORKING WITH COLORSFONT SIZE WORKING WITH COLORS
<BODY BGCOLOR> Background Color <BODY BGCOLOR> Background Color
<BODY BGCOLOR=#VALUE> <BODY BGCOLOR=#VALUE> To change the standard body to colorful body. #VALUE is compulsory in standard. To change the standard body to colorful body. #VALUE is compulsory in standard.
Tag format
<! - - =============================================== - - >
<! - - Font Size and Color Test - - ><! - - =============================================== - - ><HTML><HEAD>
<TITLE> Font Size and Color Test </TITLE></HEAD><BODY BGCOLOR=#FFFF00><CENTER>
<H2>Jonathan Swift "Time"</H2>Ever eating; never cloying,<BR> All-devouring; all-destroying,<BR> Never finding; full repast,<BR> Till I eat the world at last.<BR>
</CENTER></BODY></HTML>
• <BODY> Color and Background<BODY> Color and Background
