HTML Text formatting tags

This presentation will describe about the text formatting tags in html.

1. COMPUTER APPLICATIONS CLASS X (Code 165) TOPIC: UNIT 2: Text Formatting Tags By HIMANSHU PATHAK

2. Contents Introduction Text Formatting Tags Font Tags

3. Introduction HTML provides us with the ability for formatting text just like we do it in MS Word or any text editing software. It gives us the ability to format the text without using CSS . The following HTML tags are used to format the appearance of the text on your web page.

4. Bold : <b> </b> The <b> tag is used to make a word or group of the word special to draw the reader's attention. However, you should not use the b tag to make text bold instead use the font-weight property of CSS. Example : <p>b tag is used to make <b>special words</b> bold.</p> Strong Emphasis - <strong> </strong>Used to emphasize text more, which usually appears in bold, but can vary according to your browser.

5. Italic : < i > </ i > It works as the same way as a word processor, italics displays the text at a slight angle . It makes text italic and is used to define technical terms, idiomatic text, etc. Example : <p>HTML is a < i >markup language</ i >.</p> Emphasis - < em > </ em > Used to emphasize text, which usually appears in italics, but can vary according to your browser.

6. Underline: <u> </u> The <u> tag is used to represent a non-literary explanation. Again, the same as underline in a word processor . Note that html  links  are already underlined and don't need the extra tag. Example : p>There are lots of <u> speling </u> mistake in <u> thes </u> line.</p>

7. Strike-out: <strike> </strike> Puts a line right through the centre of the text, crossing it out . Often used to show that text is old and no longer relevant . Also works by using <s> </s> instead. The  <del>  tag defines texts which have been remove from the document or webpage. Example : <p><s>Use & lt;center&gt ; tag to ceter a text in HTML.</s></p>

8. Preformatted Text: <pre> </pre> It is used to present text as it is written in an HTML document. The whitespaces used in the element are displayed the same as written . Example : <pre>Y Y Y Y Y Y Y Y </pre>

9. Superscript:  The <sup> tag is used to display text as superscript. Superscript is rendered with a raised baseline and smaller text. This tag are broadly used in Mathematics . Example : <p> Area of a Circle is: Pi * radius ² </p>

10. Subscript:  The <sub> tag is used to display text as a subscript. Subscript is rendered as small text with a lower baseline. This tag is broadly used in Chemistry . Example : <p>Molecular formula of water is H₂O</p>

11. Small: <small> </small> The <small> tag is used to define smaller text like copyright, comments, etc. By default, it renders text smaller than standard however it can be controlled using CSS. Example : <p>The & lt;small&gt ; tag is used to make text <small>smaller</small>.</p>

12. Abbreviation: < abbr > </ abbr > The < abbr > tag is used to represent an abbreviation or acronym. The tag accepts a title attribute that accepts the full form of the word. When the reader hovers the text it shows a full description of the word . Example: <p>< abbr title ="Hypertext markup language">HTML</ abbr > is used to create webpages.</p>

13. Mark: <mark> </mark> The <mark> tag marks or highlights a text to grab reader's attention . Example : <p>mark tag is used to <mark>highlight</mark> a text.</p>

14. Meter: <meter> </meter> The <meter> tag is used to define a scale with a given range and value . The tag requires a defined value with min value and max value of the scale. The  min, max  and the  value  are attributes of the tag. You can also give low and high values to the scale which is used to change the color of the scale. If the value of the scale is below the low value then the scale is green, if the value is between low and high then the scale is yellow and if the scale is above the high value then the scale is red. Example: <p>Speed of bike was 65kmph <meter min="0" max="100" low="33" high="66" value="65"></meter></p>

15. Quotation: <q> </q> The <q> tag defines an inline quotation . The most modern browser automatically adds quotation marks around the text. Example: <p> Modi is our <q>prime minister</q></p>

16. Font Tags The <font> tag plays an important role in the web page to create an attractive and readable web page.  The font tag is used to change the color, size, and style of a text.   Now, it is not supported by HTML 5. The font tag has basically three attributes which are given below:    Size Face/Type Color

17. Font Size This attribute is used to adjust the size of the text in the HTML document using font tag with size attribute . The range of size of the font in HTML is from 1 to 7 and the default size is 3. Example : <font size = "3">Welcome to!</font>< br /> <font size = "4"> Pathak’s Computer </font>< br /> <font size = "5">Online-classes!</font>< br />

18. Font Type Font type can be set by using face attribute with font tag in HTML document. The fonts used by the user need to be installed in the system first.  To show text in a particular font, use the font name such "Helvetica" or "Arial" or "Courier". Example : <font face = " Verdana " size = "6"> Pathak’s Computer Academy !!</font>< br />

19. Font Color Font color is used to set the text color using font tag with the color attribute in HTML document. Color can be specified either with its name or with Its hex code or with RGB value.  Example :  <font color = "#009900"> Himanshu </font>< br />  <font color = "green"> Pathak </font>

20. Today we learn Learned basic Text Formatting Tags Font Tags and their attributes In the next class, we will start Unit II – Image, Links & Lists Tags in detail. Thanks