Insights Technical Hub How to Understand Basic HTML Tags

How to Understand Basic HTML Tags

Introduction:

HTML tags are used with a simple tree layout. Few tags are required to create functional simple pages. HTML markup is useful, even when expanded upon with further technologies, such as Javascript, JSP, AJAX etc.

Requirements:

A text editor, and web browser.

Procedure:

Create a file, and save the file with the .html file extension after the file name. It should not have .txt as the file extension. Open the file with a text editor. Type this in the file, starting at the first line:

<html>
<body>
</body>
</html>

This creates a blank page with HTML markup. Notice each tag ends with a corresponding tag, preceded with ‘/’. The ‘<html>’ tag is the root of the DOM (Document Object Model) tree. Let’s create some tags in the <body> tag:


<html>
<body>
<div>
<table>
<tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td>Row 1 Col. 1</td><td>Row 1 Col. 2</td><</tr>
<tr><td>Row 2 Col. 1</td><td>Row 2 Col. 2</td></tr>
</table>
<br />
<form action=/location/page.html>
<input type=”submit” value=”button name”/>
</form>
</div>
</body>
</html>

This creates a page with a table and a form. Everything is enclosed in the same section, division, or ‘<div>’. The table has a heading row followed by two standard rows. The row element/column value are enclosed by either ‘<th></th>’ or ‘<td></td>’ pairs. The ‘<br />’ tag indicates a line break. Blank lines in the .html file do nothing. A form sends information to the server and can redirect afterwards. This form would redirect to ‘/location/page.html’ if it exists. You can create this directory with the named page. After being redirected, you should see where this directory would be in the address bar. This form has a button named ‘button name’ which can be used to submit information. Lets add a heading, title, and the ‘<head>’ tag.

<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading with h1 formatting</h1>
<div>
<table>
<tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td>Row 1 Col. 1</td><td>Row 1 Col. 2</td></tr>
<tr><td>Row 2 Col. 1</td><td>Row 2 Col. 2</td></tr>
</table>
<br />
<form action=/location/page.html>
<input type=”submit” value=”button name”/>
</form>
</div>
</body>
</html>

The title goes in the ‘<head>’ section, and the heading has ‘<h1>’ formatting. Default formatting for ‘<h2>’ and ‘<h3>’ are less important, secondary and tertiary headings. The title should show up at the top of the browser or in the browser’s page tab.