Text formatting tags (1)
Text formatting tags (1)
The following text should be typed in to a local file on a system which is equipped with a Web browser.
<html>
<head>
<title>
A Simple HTML Document
</title>
</head>
<body>
<p>This is a very simple HTML document</p>
<p>It only has two paragraphs</p>
</body>
</html>
When authoring a Web/HTML document there are several stages which will be repeated time and time again.
1. Using a local editor (or word processor) create the HTML file.
2. View the local file by using the Open file... option on the File menu.
3. If you see any errors, go back to (1) and repeat the exercise. Note: most Web viewers will store
previously viewed pages and sometimes gives the impression that corrections to the original HTML
documents have not been made. Always Reload HTML documents after they have been edited.
If there are no errors in your typing etc. the above tags should be interpreted as:
The document's title will appear as the viewing windows name and the text will appear in the default font for
your browser, which is usually a Times Roman typeface with font size 12point.
The following HTML tags are used to format the appearance of the text on your web page. This can
jazz( make different) up the look of the web page. However, too much variety in the text formatting can also
look displeasing.
1. Heading:- There are 6 levels of headings available, from h1 for the largest and most important heading ,
down to h6 for the smallest heading.
Syntax:- <hi>----------------</hi> where i=1,2,3,4,5,6
Ex:- <h1>Heading 1</h1> //The first heading tags
2. Paragraph tag:- It represents a paragraph of text. Paragraphs are usually represented in visual media as
blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation.
Syntax:- <p [align=”left” | “center” | “right”]>The text</p>
Ex:- 1. <p>The para</p> 2. <p align=”right”>The right para </p>
3.Bold:- The text in between the tags will be bold, and stand out against text around it, the same as in a word
processor.
Syntax:- <b>---</b> Example:- <b>The text is in Bold </b>
4.Italic:- Also working the same way as a word processor, italics displays the text at a slight angle.
Syntax:- <i>------</i> Example:- <i>The text is in italic</i>
5.Underline:-It displays the text with underlined( the same way as a word processor).
Syntax:-<u>------</u> Example:- <u>The text to be underlined</u>
6.Preformatted text:- Any text between the pre tags, including spaces, carriage returns and punctuation, will
appear in the browser as it would in a text editor (normally browsers ignore multiple spaces)
Syntax:- <pre>------</pre> Example:- <pre>Wel
C ome </pre>
7. center:- A useful tag, as it says, it makes everything in between the tags center(in the middle of the page).
Syntax:- <center>-------</center> Example:- <center>The text display in center.</center>
8. Strike-out:- Puts a line right through the center of the text, crossing it out. Often used to show that text is old
and no longer relevant.
Syntax:- <strike>--------</strike> Example:- <strike>The text is striked</strike>
9. Superscritpt:- Superscript text appears half a character above the normal line, and is sometimes rendered in a
smaller font(like 2 10 = 1024).
Syntax:- <sup>-----</sup> Example:- 2 <sup> 10 </sup> = 1024
10. Subscript:- Subscript text appears half a character below the normal line, and is sometimes rendered in a
smaller font( like H2O).
Syntax:- <sub>-------</sub> Example:- H <sub> 2 </sub> O
11.Big:- This tag makes the text size bigger in the HTML document.
Syntax:- <big>--------</big> Example:- <big>The text is in Big </big>
12. Small:- This tag makes the text size smaller in the HTML document.
Syntax:- <small>--------</small> Example:- <small>The text is in small</small>
13.mark:- This tag is used to highlight the text within the tag.
Syntax:- <mark>-------</mark> Example:- <mark>important</mark>
14.Emphasis:- This tag marks text that has stress emphasis which traditionally means that the text is displayed
in italics by the browser.
Syntax:-<em>----</em> Example:- <em>The text is emphasized</em>
15.Strong:- It indicates that its contents have strong importance, seriousness, or urgency. Browsers typically
render the contents in bold type.
Syntax:- <strong>----</strong> Example:- <strong>The text is strong</strong>
16.insert:- The HTML <ins> element represents a range of text that has been added to a document.
Syntax:- <ins>-------</ins> Example:- <ins>The new text is inserted</ins>
17.delete:- The HTML <del> element represents a range of text that has been deleted from a document.
Syntax:- <del>--------</del> Example:- <del>The text is deleted </del>
18.Division:- The <div> tag defines a division or a section in an HTML document. The <div> tag is used to
group block-elements to format them with CSS.
Syntax:- <div>----------</div> Example:- <div>The text is divided from the sentence</div>
19.font:- The font tag can be used to display the text in the specified font type/face, size and color.
Syntax:- < font face=”name” size=”value” color=”name”>-------</font>
Example:- <font face=”Times New Roman” size=”22” color=”Green”>The TEXT</font>
20. <xmp> :- The HTML Element (<xmp>) renders text between the start and end tags without interpreting the
HTML in between and using a monospaced font.
Syntax:- <xmp>------------</xmp> Example:- <xmp> <p>The para</p> <b>The bold </b> </xmp>
Example:-
<html> Output:-
<head>
<title>Text Formatting</title>
</head> Text Formatting
<body> The Text is
<h3 align="center"><b><u>Text Formatting</u></b></h3>
The Text is <p>paragraph</p><br> paragraph
The Text is <pre>pre
formatted</pre><br>
The Text is <b>bold</b><br>
The Text is
The Text is <i>italic</i><br>
The Text is <u>underline</u><br> pre
The Text is <big>big</big><br>
The Text is <small>small</small><br> formatted
The Text is <strong>strong</strong><br>
The Text is <h1>heading1</h1><br> The Text is bold
The Text is <div>div</div><br>
The Text is italic
The Text is <em>emphasis</em><br>
The Text is <strike>strike</strike><br> The Text is underline
</body> The Text is big
</html> The Text is small
The Text is strong
The Text is
heading1
The Text is
div