1 / 28

2.3 HTML Text

2.3 HTML Text. CONTENTS INCLUDES :- TEXT LAYOUT SKILLS FONTS EFFECT HEADING ON WEB PAGES IMAGE / PICTURE. 2.3 HTML Text. Layout Tags <BR> Break Line. Tag format. …………………<BR> . To force a line of text to break up where it is placed.

ananda
Download Presentation

2.3 HTML Text

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2.3 HTML Text

  2. CONTENTS INCLUDES :- • TEXT LAYOUT SKILLS • FONTS EFFECT • HEADING ON WEB PAGES • IMAGE / PICTURE

  3. 2.3 HTML Text • Layout Tags<BR> Break Line Tag format …………………<BR> • To force a line of text to break up where it is placed. <! - - =============================================== - - > <! - - 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>

  4. <NOBR> No Break Line Tag format <NOBR>…………………</NOBR> • It’s capable of turning of the function of break line. <! - - =============================================== - - > <! - - 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>

  5. <P> Paragraph Tag format <P>…………………</P> • Split the paragraph into two by inserting a line break and. <! - - =============================================== - - > <! - - 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>

  6. &nbsp; Letter –Spacing Mark Tag format &nbsp ; • To create spacing among words or letter. <! - - =============================================== - - > <! - - Letter spacing mark - - > <! - - =============================================== - - > <HTML> <HEAD> <TITLE> Letter- spacing mark </TITLE> </HEAD> <BODY> --Jonathan Swift "Time" <BR> Ever eating &nbsp;&nbsp; never cloying, <BR> All-devouring &nbsp;&nbsp; all-destroying, <P> Never finding &nbsp;&nbsp; full repast, <BR> Till I eat &nbsp;&nbsp; the world at last. <P> </BODY> </HTML>

  7. <CENTER> Center Alignment Tag format <CENTER>…………………</CENTER> • To center the text horizontally across the display window. <! - - =============================================== - - > <! - - 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>

  8. <BLOCKQUOTE> Indentation Tag format <BLOCKQUOTE>…………………</ BLOCKQUOTE > • The text will indent five blank letter toward the right. <! - - =============================================== - - > <! - - 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>

  9. Heading ormat <H> Heading tags Tag format <Hx>……………</ Hx > x=1,2,3,4,5,6 • Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading . <! - - =============================================== - - > <! - - 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>

  10. <H> Heading Alignment Tag format ALIGN = “LEFT” / “CENTER” / “RIGHT” • To control the alignment style of heading <! - - =============================================== - - > <! - - 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>

  11. FONT EFFECTS <STRONG>, <B> Boldface Tag format <STRONG>………….</STRONG> / <B>…………..</B> • To display a text in a bold font. <! - - =============================================== - - > <! - - 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>

  12. <EM>, <I>, <CITE> Tag format <EM>.….</EM> / <I>…..</I> / <CITE>………</CITE> • To display a standard text turn into a italics text. <! - - =============================================== - - > <! - - 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>

  13. <U> Underline Tag format <U>.…………………………….</U> • To display a standard text turn into underlined the enclosed text. <! - - =============================================== - - > <! - - 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>

  14. <STRIKE> Strike-Trough Format Tag format <STRIKE>.…………………………….</STRIKE> • To display a result in the enclosed text in a strikethrough 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>

  15. <BLINK> Blinking Text Tag format <STRIKE>.…………………………….</STRIKE> • To display a result in the text of blinking in on and off. <! - - =============================================== - - > <! - - 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>

  16. <BIG> BigFont Tag format <BIG>.…………………………….</BIG> • To display a result in the enclosed text to be one size bigger than standard size <! - - =============================================== - - > <! - - 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>

  17. <SMALL> Small Font Tag format <BIG>.…………………………….</BIG> • To display a result in the enclosed text to be one size smaller than standard type size <! - - =============================================== - - > <! - - 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>

  18. <SUB> Subscript Tag format <SUB>.…………………………….</SUB> • To display a result in the enclosed text as subscript, which will appear a bit lower than standard text height. <! - - =============================================== - - > <! - - Subscript Text- - > <! - - =============================================== - - > <HTML> <HEAD> <TITLE> Subscript Text</TITLE> </HEAD> <BODY> <H1> H<SUB>2</SUB>O </H1> </BODY> </HTML>

  19. <SUP> Superscript Tag format <SUP>.…………………………….</SUP> • To display a result in the enclosed text as superscript, which will appear a bit higher than standard text height. <! - - =============================================== - - > <! - - Superscript Text- - > <! - - =============================================== - - > <HTML> <HEAD> <TITLE> Superscript Text</TITLE> </HEAD> <BODY> <H1> X<SUP>2</SUP> +Y<SUP>2</SUP> </H1> </BODY> </HTML>

  20. <BASEFONT> Default Font Tag format <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 font size is 3, if no other font size is specified. <! - - =============================================== - - > <! - - 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>

  21. <HR /> Horizontal Rules Tag format <HR /> • 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. <! - - =============================================== - - > <! - - 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>

  22. <!--……..--> Comment tag Tag format <!--………………...--> • 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 when you edit the source code at a later date.. <! - - =============================================== - - > <! - - Comment Tag- - > <! - - =============================================== - - > <HTML> <HEAD> <TITLE> Comment Tag</TITLE> </HEAD> <BODY> Comment Tag </BODY> </HTML>

  23. CHANGING FONT SETTING <FONT> Changing Font Size Tag format <FONT SIZE = N> ……………… </FONT> • To display a font size in N value which is N = 1 between 7 or others. <! - - =============================================== - - > <! - - 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>

  24. <! - - =============================================== - - > <! - - 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>

  25. CHANGING FONT COLOR <FONT> Changing Font Color Tag format <FONT COLOR = #VALUE> ……………… </FONT> • 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. <! - - =============================================== - - > <! - - 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>

  26. FONT SIZE WORKING WITH COLORS <FONT> Font size working with color Tag format <FONT SIZE = N COLOR = #VALUE> ……… </FONT> • The combination of font size and font color. <! - - =============================================== - - > <! - - 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>

  27. FONT SIZE WORKING WITH COLORS <FONT> Font size working with color Tag format <FONT SIZE = N COLOR = #VALUE> ……… </FONT> • The combination of font size and font color. <! - - =============================================== - - > <! - - 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>

  28. <BODY> Color and Background <BODY BGCOLOR> Background Color Tag format <BODY BGCOLOR=#VALUE> • To change the standard body to colorful body. #VALUE is compulsory in standard. <! - - =============================================== - - > <! - - 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>

More Related