HTML

Basic HTML Tags

The basic tags include <html>, <title>, <meta>, and <body>. We introduce each of the four in the following:
<html>
This tag is used to indicate that this is a HTML document. Most HTML documents should start and end with this tag.
<head>
This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is not displayed in the main window of the browser.
<title>
This indicates the title of this HTML page. The title is what is displayed on the upper left corner of your browser when you view a web page. For example, right now you can see "Basic Tags: html, head, title, meta, body" there. That is the title of this page.
The title tag is important when it comes to search engine ranking. Many of the search engines pay special attention to the text in the title tag. This is because (logically) that words in the <title> tag indicate what the page content is.
<meta>
The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is used for the author of the HTML page to record information related to this page. Two common attributes are name and content. The <meta> tag used to hold great importance in search engine optimization, with authors carefully drafting what's inside the tag to gain better search engine ranking, but recently its importance has been decreasing steadily.
<body>
The <body> tag includes the HTML body of the document. Everything inside the <body> tag (other than those within the <script> tag) is displayed on the browser inside the main browser window.
The <body> tag may contain several attributes. The most commonly used ones are listed below:
• bgcolor: This is the background color of the entire HTML document, and may be specified either by the color name directly or by the six-digit hex code.
• alink: The color of the links.
• vlink: The color of the visited links.
• topmargin: The margin from the top of the browser window.
• leftmargin: The margin from the left of the browser window.
So, in general, all HTML documents have the following format:
<html>
<head>
<title>
Here is the title of the HTML document.
</title>
<meta name=" " content=" " />
... (there may be one or more meta tags)
</meta>
</head>
<body>
Here is the body of the HTML document.
</body>
</html>


HTML Format
This section includes the tags often used for formatting the HTML text.

<font>

The <font> tag is used to change the format of the text on the web page. The most important attributes are as follows:
  • face: The type of font. Common ones include "Time New Roman", "Verdana", and "Helvetica."
  • size: This indicates the size of the text. This can be absolute (0 .. 6), or relative ("+1", "+2", ... or "-1", "-2" ...)
  • color: This indicates the color of the text. Either the color name or the six-character color code may be used to specify color.
Below are some examples:
Example 1
HTML:
<font size=2 face="Helvetica" color=red>This illustrates the attributes of the font tag.</font>
Display:
This illustrates the attributes of the font tag.
Example 2
HTML:
<font size="+1" face="Verdana" color=AA5088>This illustrates the attributes of the font tag.</font>
Display:
This illustrates the attributes of the font tag.

<b>

The <b> tag will bold the text inside the tag.

<i>

The <i> tag will italicize the text inside the tag.

<u>

The <u> tag will underline the text inside the tag.
Here's an example using <b>, <i>, and <u>:
Example 3
HTML:
This <b>example</b> shows how <i>important</i> it is to use <u>tags</u>.
Display:
This example shows how important it is to use tags.

Header Tags

The header tags <h1>, ... <h6> allows us to place additional importance on the text within such tags. <h1> has the largest size, and <h6> the smallest. Many search engines put additional weight on the texts within the header tags.
Example 4
HTML:
<h1>This is h1 text.</h1>
<h2>This is h2 text.</h2>
<h3>This is h3 text.</h3>
<h4>This is h4 text.</h4>
<h5>This is h5 text.</h5>
<h6>This is h6 text.</h6>
Display:

This is h1 text.

This is h2 text.

This is h3 text.

This is h4 text.

This is h5 text.
This is h6 text.

<center>

The <center> tag causes all the text within the tag to be centered. An example is as follows:
Example 5
HTML:
<center>This is centered text.</center>
Display:
This is centered text.

<br>

The <br> tag indicates a line break. This tag is most often used by itself, without a corresponding closing tag.

<p>

The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often used by itself, without a corresponding closing tag. 
HTML Tables
This section lists the tags often used with HTML tables: <table>, <tr>, and <td>.
<table>
The <table> tag specifies the presence of a table. This is very often used in conjunction with the <tr> and the <td> tags. The following attributes are commonly used to define the properties of this table:
  • width: This specifies the width of the table. Can be specified in pixels or in relative terms (for example, 100%).
  • border: This specifies whether the table will have a border. The number indicates the thickness of the border.
  • cellspacing: The amount spacing between the cell wall and the cell border. The area enclosed by the cell walls are the maximum amount of area that text can be displayed in a cell.
  • cellpadding: The amount padding between cells and the each cell wall in a table.
  • bgcolor: This specifies the background color for this table. The color value may be specified as the color name or the six-character color code.
<tr>
The <tr> tag specifies the presence of a row. The following attributes are commonly used to define the properties of this row:
  • bgcolor: This specifies the background color for this row. The color value may be specified as the color name or the six-character color code.
  • height: This specifies the height of the row.
  • rowspan: This specifies the number of rows this particular row occupies.
<td>
The <tr> tag specifies the presence of a column. Columns are specified within each row. The following attributes are commonly used to define the properties of this column:
  • valign:
  • width: This specifies the width of the column. Can be specified in pixels or in relative terms (for example, 50%).
  • bgcolor: This specifies the background color for this column. The color value may be specified as the color name or the six-character color code.
  • colspan: This specifies the number of columns this particular column occupies.
Example 1
HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:

Element 1Element 2Element 3
Element 4Element 5Element 6

 
Example 2
HTML:
<table border=1 width=500>
<tr><td width=200>Element 1</td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1Element 2Element 3
Element 4Element 5Element 6

Example 3
HTML:
<table border=1 width=500>
<tr bgcolor=red><td width=200><b>Element 1</b></td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td bgcolor=55ff55>Element 4</td><td>Element 5</td><td><i>Element 6</i></td></tr>
</table>
Display:


Element 1Element 2Element 3
Element 4Element 5Element 6


Example 4
HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td colspan=2>Element 4</td><td>Element 5</td></tr>
</table>
Display:

Element 1Element 2Element 3
Element 4Element 5


Example 5: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=10 cellpadding=0>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1Element 2Element 3
Element 4Element 5Element 6


Example 6: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=0 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1Element 2Element 3
Element 4Element 5Element 6

Example 7: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=10 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1Element 2Element 3
Element 4Element 5Element 6

HTML LISTS

This section lists the tags often used with HTML lists: <ol>, <ul>, and <li>.
<ol>
The <ol> tag specifies that the following list is ordered.
<ul>
The <ul> tag specifies that the following list is unordered.
<li>
The <li> tag lists each item, whether ordered or numbered. Note that each item is indented.
Example 1: ordered list.
HTML:
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
Display:

  1. Apple
  2. Banana.
  3. Orange

Example 2: unordered list.
HTML:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Display:
  • Apple
  • Banana.
  • Orange

1 comment:

  1. Venkat7 December 2016 at 22:56

    Thank you sir giving a such information about Html and also related subjects

    ReplyDelete

Subscribe to: Posts (Atom)