This tutorial is basically for Beginners. Basic tags of HTML with Example
HTML-FORMATTING
Introduction
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
1. Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
2. As its name suggests, HTML is a Markup Language which means you use HTML
to simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one
line after that heading.
Paragraph Tag
The tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening and a closing
Line Break Tag
Whenever you use the element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use it is not valid in XHTML.
Centering Content
You can use <center></center>tag to put any content in the center of the page or any table cell.
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr/>
tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
HTML – ELEMENTS
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags.
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.There are some HTML elements which don't need to be closed, such as <img.../>, <hr/> and <br /> elements. These are known as void elements.
HTML documents consist of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag. For example, <p>is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.
HTML – ATTRIBUTES
We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information. An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value:
The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
HTML-FORMATTING
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below −
<!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html>
This will produce the following result −
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below −
Example
<!DOCTYPE html> <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses an <i>italicized</i> typeface.</p> </body> </html>
This will produce the following result −
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below −
Example
<!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses an <u>underlined</u> typeface.</p> </body> </html>
This will produce the following result −
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below −
Example
<!DOCTYPE html> <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</p> </body> </html>
This will produce the following result −
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.
Example
<!DOCTYPE html> <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a <sup>superscript</sup> typeface.</p> </body> </html>
This will produce the following result −
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.
Example
<!DOCTYPE html> <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a <sub>subscript</sub> typeface.</p> </body> </html>
This will produce the following result −
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>
This will produce the following result −
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html> <html> <head> <title>Deleted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>
This will produce the following result −
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below −
Example
<!DOCTYPE html> <html> <head> <title>Larger Text Example</title> </head> <body> <p>The following word uses a <big>big</big> typeface.</p> </body> </html>
This will produce the following result −
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below −
Example
<!DOCTYPE html> <html> <head> <title>Smaller Text Example</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html>
This will produce the following result −
0 comments:
Post a Comment