Your First $1000 online (2014)

Chapter 2: HTML Tags

“Controlling complexity is the essence of computer programming”.

Brian Kernighan

Various images are depicted on a web page with the aid of HTML texts. These texts also enable website developers to create structured documents. They can create different headings, paragraphs, links and other content too.

The purpose of HTML texts is only to depict content and information displayed on a web page. How the web page is presented and behaves is controlled by Cascading Style Sheets (which are usually referred to as CSS transitions). We will talk about these later.

For a web browser to interpret the content, one needs to write an HTML text in a particular way. Think of it this way: if you wanted to explain something (in writing form), it won’t make sense for you to write one word, would it? You have to write many words to form a sentence. This way the person reading the sentence understands the text and you can get your point across.

Now, compare this with how HTML Texts function. There are different tags in HTML texts. Tags are used to set headers, paragraphs, line breaks and such like. So, when making a web page you need to have an idea of how you would want the web page to look. It would be easier for you to set the HTML tags, then.

XML syntax is used for this tags.

Types Of HTML Tags

There are two types of tags:paired tagsandunpaired tags.

Paired tags are placed between tags and companion tags. Here’s an example <i>This text is in Italics </i>. <i> is the opening tag while </i> is the closing tag. You can tell which tag is which because of their positions.

Unpaired tags do not have companion tags and this is why they are also referred to as Stand-Alone tags. <hr> is an example of such a tag. As you can see there are no opening or closing tags.

Purpose-Based Tags

Every tag has its own purpose and there are primarily three types of tags where these are concerned.

1. Formatting Tags: these tags are used so that web page developers can manage fonts or to underline the text and such like. So, the <b> tag can be used to make a word, sentence or the entire text bold.

2. Page Structure Tags: these do not affect the format of the page as such but they enable one to handle the structure of the page. The head, title and description are examples of these tags.

3. Control Tags: Script and form tags are part of these tags.

Imagetagsare used to embed images in a structured document for a web page. The<img>tag is used to refer to a particular image. The text inside the enclosed brackets is the HTML tag.

Basic Codes For Page Structure

Certain codes are used to create the Page Structure. These HTML codes determine where the Header, Title, Body and other contents go. Bear in mind that once you are done developing the web page, you cannot see the codes unless you access it to make certain changes. So, if you were to visit www.Google.com you won’t be able to see the HTML codes, for example.

Here’s a plain and simple HTML template:

<html>

<head>

<title>Page title here </title>

</head>

<body>

Our body content here

</body>

</html>

As is visible, the page structure is kept between the HTML tags. The head goes between the<head>and</head>tags while the body goes between the<body>and</body>tag. The tags without the oblique lines (/) are the opening tags while the part with the oblique lines are the end tags.

Anything that a web developer would want readers or visitors to read is inserted within the body tag.

The Head Tag

Any text you use to make the Head with the Head Tags will not be visible on the browser. Web developers also insert meta tags here so that anyone looking for content that the web page offers can find the web page with ease.

Title Tags

These appear in the top-left side of the window. Important keywords should be displayed here so readers get an idea of what the web page is all about. Though JavaScript is not relevant to this section, you should know that any JavaScript code inserted in the tag is loaded and can be seen on the web page.

Body Tags

This is where the‘main body’ goes. Any content you want your readers to read will be made visible here. Insert or type any content you would like to be displayed here. The page is then, closed with the</html>tag.

HTML Elements

Different tags are used to create HTML elements just like different words are combined to form a sentence. This is how HTML elements are usually depicted: <tag attribute1="value1" attribute2="value2">content</tag>.

If the HTML is empty (as it is in case of a line break tag), this is what it would look like:<tag attribute1="value1" attribute2="value2">.

Tags are used to name the specific HTML element. So, if you want to create a header in a document, this how it will look:<h2>Heading level 2</h2>.

HTML elements start with the use of the starting tag and end with the use of the ending tag. The first tag is like the first letter of a sentence while the ending tag is like the full stop of the same element. Once the last tag is added your element is complete. This is only the case where there is other content.

Where Stand-alone tags are concerned there are no starting or ending tags.

Also, one HTML element can be used within another HTML element. These are called Nested HTML Elements because one element is literally placed within another. Here’s an example:

<!DOCTYPE html>

<html>

<head>

<title>Nested Elements Example</title>

</head>

<body>

<h1>This is <i>italic</i> heading</h1>

<p>This is <u>underlined</u> paragraph</p>

</body>

</html>

You will get the following result:

This is italic heading

This is underlined paragraph

The title and header were nested within the body of the HTML template. The content was italicized and underlined on the same template. By doing this web developers can get more work done in a shorter time period.

HTML codes and elements are pretty much the same thing. Programmers often use the terms interchangeably.

Using HTML Header Elements

There are different elements for the header, body, frame, table, text formats, etc. In this section you will read about Header elements so that you can implement these when developing your own website.

<head>: this is the opening tag for an HTML document. You can place other tags in this tag.

<title>...</title>: this tag would enable you to name your document and it is generally preferred that the title be 64 characters long (maximum).

<base href="url">: the base URL of the document can be specified with this element. You can also dereference URLs.

<base href="url" target="...">: in addition to the functions of the previous element, this element can also be used so that you can specify the base target frame that a link or links would default to.

</head>: this is the closing tag for the header element.

Using Body Elements

<body>...</body>: this is used to enclose the body of the structured document.

<hn>...</hn>: you can manipulate the size of the heading by typing 1, 6 or any number between two in place of n.

<basefont size="n"> : allows you to set (what you want to be) the default font properties for you web page.

<isindex attributes>: your server must be capable of supporting this element. This element will display a text box. The text box is used to indicate that a searchable index exists on the web page.

<img src="URL" attributes>: you can place an inline image on your document.

<map attributes>...</map>: this enables you to specify collections of hot spots on an image map. You can also use the <area> tag to specify the hot spots on this map.

<area attributes>...</area>: this will enable to define the size and shape of these hot spots on the map.

<marquee attributes>...</marquee>: enables you to place scrolling text on your web page.

<applet attributes>...</applet>: if you are using a browser that cannot support Java, you can type text between the two tags so that it can be displayed by the browser.

<a href="...">...</a>: you can use this to display a link for another website/anchor. However, using the NAME attribute would enable you to change the text or graphic into an anchor.

<ol attributes>...</ol>: text written between these tags and marked with <li> will be displayed as a numbered list.

<ul attributes>...</ul>: if you were to mark text between the tags with <li>, you could create a list with bullet points.

Using Frame Elements

<frameset attributes>...</frameset> - You can use these tags so define a set of frames that you would like to use for your page. The <frame> and <noframes> tags are inserted here. While the <frameset> tag is used within the <body> tag, it is also possible for you to insert the <body> tag within <noframes> tags so that these can be displayed by browsers that are not capable of supporting frames.

<frame attributes /> - single frames within the frameset can be define by this attribute.

<noframes>...</noframes> - This is placed within the <frameset>. Material placed within the two tags are shown on browsers that are not capable of supporting frame. The tags are used primarily for older browsers that cannot display frames.

Inserting Table Elements

<table attributes>...</table> -This attribute enables you to insert a table with any number of rows.

<caption attributes>...</caption> -enables you to caption the table.

<tr attributes>...</tr> - you can use this to specify a table row. The attribute can also be used in order to enclose the table heading and/or table data.

<th attributes>...</th> - can be used to specify the table heading.

<td attributes>...</td> - can be used to specify the table data cell.

<colgroup attributes /> - can be used in order to specify the properties of various columns. It is usually inserted right after the <table> tag.

<col attributes /> - this is mostly used with <colgroup> tag to specify the properties of one particular column. it overrides attributes that have been specified in the <colgroup>.This tag comes right before the <col attributes />.

<tbody>...</tbody> - these tags are used to enclose the body of a table. You need not use the tags unless you decide to insert the <thead> or <tfoot> tags. The tags are used so you can so the rows are separated from the header and/or footer of the table. <tfoot>...</tfoot> - these tags are used to enclose table rows that you intend on using as the footer. The tag is optional and will come after <tbody>.

<thead>...</thead> - this is used to enclose table rows that will be used for the header. It is to be inserted prior to the opening <tbody> element.

Using Form Elements

<from attributes>...</from> - The elements is used to specify forms that are used in order to send user input to a server. This is done in NAME/VALUE pairs.

<input attributes /> - This attribute can be used to manage the control or input area for a form. It is this form which the NAME/VALUE pair is returned to the server. this could be Checkbox, text, Raidobox, reset, submit, password, hidden and image.

<select attributes>...</select> - You can use this to insert a dropdown list of various items that are defined by the <option> tags. The tags are then, insert in the opening and closing <select> tag.

<option value="..." /> - This would enable you to specify an item that be seen in the drop down list and the attribute is placed inside the opening and closing <select> tags. Text following the <option> tag is apparent to the user.

<textarea attributes>...</textarea> - A multi-lined text entry box can be created and any text between the tags can be used as the default text string that are visible when the page is loaded.

<button attributes>...</button> - You can insert push buttons on a form that is simiar to push buttons seen on Windows and other applications.

Using Text Formatting Elements

<address>.....< /address> - This is used to enclose the signature file of the writer of the page.

<acronym>.....< /acronym> - This is used to indicate that there is an acronym in the text.

<b>...< /b> - Text within these tags are boldfaced.

<big>...< /big> - The text’s size is increased and it is made to look bigger.

<blink>.....< /blink> - Text enclosed in the tags will blink continually.

<blockquote>.....< /blockquote> - This is used so to enclose long quotes. The left and right margins will be indented.

<br> - Inserts a line break.

<center>.....< /center> - Enclosed elements are placed in the middle of the document.

<cite>.....< /cite> - This can be used to enclose citations. Examples the title of a book, article or paper.

<code>.....< /code> - The sample of the code can be enclose by placing it between these tags and the size of the text is reduced, too.

<comment>.....< /comment> - Comments can be enclosed. Any text inside the tags will not be read if it does not contain HTML code.

<del>.....< /del> - This is used to mark the document text that was deleted in previous version.

<dfn>.....< /dfn> - This is used to enclose a definition. So, any text placed inside the tags is formatted so it can look like a definition.

<div>...< /div> - The alignment of the enclosed text can be specified with this element. It can also be used so you can divide the document into sections that have been aligned differently.

<em>...< /em> - Emphasis is laid on the text.

<font attributes>...< /font> The font properties are set for the text within these tags.

<fieldset attributes>...< /fieldset> - You can group form fields that are related to each other so the form is easier to use and read.

<hr attributes /> - This is used to make a horizontal line.

<i>...< /i> - This is used to italicize the text.

<ins>...< /ins> - This can be used if you would like to mark certain parts of a document that were added to the document's last version.

<label>...< /label> - You can label a tag.

<kbd>...< /kbd> - This is used to specify text that needs to be entered at the keyboard. The text is reduced so it can appear to be bold and fixed-width.

<p attributes>...< /p> - Designates the enclosed text as a plain paragraph.

<q>...</q> - functions the same way as the <blockquote> tag. However, this applies to quotes section that don't require the insertion of paragraph breaks.

<pre>.....< /pre> - The text can be displayed in fixed-width type and you won’t have to collapse spaces.

<s>.....< /s> - Using the element would result in text with a line running through it. The <strike> tag functions the same way.

samp>...< /samp> - The sample output from any form or program can be indicated with this element. Also, the text is reduced so it can appear in small font.

<small>...< /small> - The sized of the enclosed text is reduced so that it is a size smaller.

<spacer attributes>...< /spacer> - Blocks of spaces can be insert into the HTML documents.

<strong>...< /strong> - This can be used for stronger emphasis on the text.

<sub>...< /sub> - Condenses the text inserted in between in subscript.

<sup>...< /sup> - Condenses the text in superscript.

<tt>...< /tt> - Texts typed between these tags are formatted in typewriter font.

<u>...< /u> - This is used to underline the text.

<var>...< /var> - Variables can be specified and the text is condensed in small fixed-width type.

<wbr> - Text enclosed by NOBR tags can be wrapped if and when need be.

Refer to this link for more tags: http://htmldog.com/reference/htmltags/

Summary

Read about tags and elements. This chapter enlists various tags that are used for different purposes. Go through these so you are capable of making your own HTML template.

Questions

1. What are tags and why are they important to HTML?

2. What are elements?

3. Make your own HTML template.