Structure of HTML program
The basic structure of an HTML document is composed of five essential elements
- <!DOCTYPE>
- <html>
- <head>
- <title>
- <body>
The <!DOCTYPE> tag:- The DOCTYPE tells the web browser which version of HTML the page is written in. In this class, we will be using ‘HTML Transitional’, which allows us a little flexibility.
NOTE:- HTML is not Case-Sensitive. So <!DOCTYPE>, <!doctype>, <!Doctype> etc are all same.
The <HTML> tag:- This tag comes after the <!Doctype> tag and identifies the document as an HTML document. This tag is optional and even if it is not explicitly included most browsers assume its existence. But it is good practice to include this tag, as some document as an HTML document. may be confused while handling a document without this tag and may not display the page at all. All other tags are included within and <HTML> and <\HTML> tags.
The <Head> tag:- The tag contains information about the document, including its title, scripts used, style definitions, and document descriptions. The portion enclosed between the and tags is called the header. The header of a document is where global settings are defined, allowing users to access information quickly and efficiently. With the help of the Hypertext Transfer Protocol (HTTP), users can also download information given in the header, making it easier to access the data they need.
The <TITLE> Tag:- This tag gives an HTML document a title by which it is known to browsers and indexing robots. The title does not appear within the browser window, since it is visible in the browser’s title bar. The title is given between the tags <TITLE> and </TITLE>. Only one title is allowed per page.
The <BODY> Tag:- This tag encloses all tags, attributes and information that one wants the browser to display. To use the <BODY> tag, enter it below the closing </HEAD> tag above the closing </HTML> tag.
<!Doctype>
<HTML>
<HEAD>
<TITLE>HTML DOCUMENT</TITLE>
</HEAD>
<BODY>
<H2>Heading</H2>
<P> This is paragraph </P>
</BODY>
</HTML>What is Table Tag
<Table> Tag:- The tag is an HTML element used to create a table on a web page. Tables can be used to display tabular data, such as product information, financial records, or other types of data. There are two types of cell tags used in table
- <TH>: Marks a heading cell with in a row. It is similar to heading tag <H1…….. H6> on a web page and used to give proper heading to the columns of the table.
- <TD>: It is data cell tag and used for the body of the table.
<html>
<head>
<title> Table</title>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>Attributes
Table Borders:- Tables with borders are much easier to read and are more attractive. You can specify a table border by using “border = number” attribute in the opening table tag. The number specifies the width of the border around the table in pixels. The default zero. Most of the browsers display table borders with a 3D-effect.
<table border="1">
<tr>
<th>Name</th>
<th>Job</th>
<th>Working Experience</th>
</tr>
<tr>
<td>John</td>
<td>Software Engineer</td>
<td>5 Years</td>
</tr>
<tr>
<td>Ale</td>
<td>Senior Web developer</td>
<td>2 Year</td>
</tr>
<tr>
<td>Jack</td>
<td>Junior Tech Writer</td>
<td>6 Months</td>
</tr>
</table>
Background Color:- The background color can be set for the whole table by using “bgcolor = color” attribute in <Table> tag.
<table bgcolor="lightblue">
<tr>
<th>Name</th>
<th>Jobs</th>
<th>Working Experience</th>
</tr>
<tr>
<td>John</td>
<td>Software Engineer</td>
<td>5 Years</td>
</tr>
<tr>
<td>Ale</td>
<td>Senior Web developer</td>
<td>2 Year</td>
</tr>
</table>
Cell Spacing and Padding:- Cell spacing is defined as the amount of space between two adjacent cells. Inclusion of these spaces makes the table contents much easier to read. The spaces are specified in pixels. The default value for cell spacing attributes is 2 pixels and this attribute is included in the opening <TABLE> tag.
