HTML Other Tags

Red Zorro sm
RedZorro.com sm
We’ll hit the mark for you. sm

Editing (progressive)

HTML Other Tags

Below are ten (11) other basic HTML tags you will work with when you start website designing and programming.  But the strangeness about these tags is none of them are required, but if you want the content of your webpages highly organized, then these eleven HTML tags are needed.

Paragraph Tags: <p> </p>

  1. The paragraph tag consist of a opening and closing tag.
  2. The paragraph tags are placed at the beginning and the end of each paragraph.
  3. The paragraph tags will automatically place a space between paragraphs for you. This spacing is not seen in Text Editor/CODE PAGE; it is actually seen in Browser/DESIGN PAGE.  (see Code Page I and Design Page I below)

Break Tag: <br />

  • The break tag consist of a single tag.
  • Inside the tag, there is a space between the letters br and the forward slash.
  • The break tag is place at the end of a paragraph tag or below the paragraph.
  • It places a space between code lines in the Text Editor/CODE PAGE, which are then seen in the Browser/DESIGN PAGE.
  • The spaces between the code or paragraph(s) is determined by the number of <br /> tags.  This space is seen in the Code Page and the Design Page.  (see Text Editor/CODE PAGE and Browser/DESIGN PAGE below)

Bold Tags: <b></b>

  • The bold tag consist of a opening and closing tag.
  • The bold tags are used to bold a single letter, word, sentence or an entire paragraph.
  • The coding can be seen in the Text Editor/CODE PAGE I below, and how the bolding will be seen can be seen in the Browser/DESIGN PAGE below.

Underline Tags: <u> </u>

  • The underline tag consist of two tags.
  • This tag is used to underline a single letter, word or sentence.  The coding for the underline tags can be seen in Text Editor/CODE PAGE I and the results can be seen in Browser/DESIGN PAGE I.

 Unordered List Tags: <ul> </ul>

  • The unordered list tag consist of two tags.
  • This tag is used to create a list of bulleted choices.
  • The coding is stated in the Text Editor/CODE PAGE I, and how it will appear in browser is stated in Browser/DESIGN PAGE below.

Ordered List Tags: <ol> </ol>

  • This ordered list tag consist of two tags
  • It creates a list with numbered items.
  • The coding for the ordered list is stated in Text Editor/CODE PAGE I, and how it will appear in a browser is stated in Browser/DESIGN PAGE below.

A Tags: Absolute and Relative Links : <a> </a>

The opening and closing a tags are used to create absolute and relative links on a webpage.  These links lets website visitors connect to other pages at other websites (absolute), and pages to other pages within your website (relative).

Table Tags: <table> </table>, <th> </th>, <tr>, </tr> and <td> </td>

Table tags creates tables.  Tables keep the content of your website highly organized by placing text, images and forms inside of the cells of the tables.

  • Tables also lets you store other information inside of it, such as chart information that you insert into the table or data inserted into the table when the results from a database has been generated.
  • Table Tag Description
  • The opening <th> and closing </th> header tags hold information about the columns information.  These two tags are optional.
  • The opening <tr> and closing </tr> tags are the row tags that contains the cells that hold information for the columns in the table.
  • The opening <td> and closing </td> cell tags hold information for the form.
  • In the Text Editor/CODE PAGE I below, the table consist of three columns (3) and three rows (3).
  • In Web Browser or DESIGN PAGE I, only the word “Table” and the number of columns (3) and rows (3) are displayed.

Form Tags: <form> </form>

The form tags create forms that allow for the collection of data that can be stored in a table at the website, or stored in a data base at the website.

  • The form tags are container tags.Forms contain controls or form fields for information input from website visitors.
  • Once the information from these forms has been processed, the collected information from these controls or form fields can then be forwarded to an email address supplied by you, displayed in a table on your website, or stored in a database on your website or a server.
  • In the form in the Text-Editor/CODE PAGE I below, a table contains a form that holds and organizes six form descriptions and six single-line text boxes.
  • In the Web Browser/DESIGN PAGE I, only the word “Form” and the six form labels and six controls or form fields are displayed.

Division Tags: <dvi> </div>

Division tags are very powerful.  They can position you to manage one page, 100,000 pages or 1.5 billion at the same time.

  1. Division Tag: Single-Page Use:
  2. The division tag can be employed with single pages, like the homepage, the mail sign-in page, the about page, the contact page, the registration page and other single pages too.
  3. The changes to the division pages will take place via the internal and external style sheets.
  4. Division Tag: Multi-Page Use:
  5. Division tags are very powerful tags.
  6. With the division tags, you can change the content of hundreds of thousands, or even billions of pages simultaneously just by changing one page.
  7. Because the basic structure of your email account, Facebook account, search engine results page use the same basic page layout, there is very good chance that these pages use the division tag to manage these countless numbers of pages people access everyday.
  8. Furthermore, you can attach an internal or external style sheet to the division tags to manage and organize the design and content of each division on each page associated with the division tags.
  9. In Text Editor/CODE PAGE II below, there are for divisions on the webpage: Header Content, Main Content, Form, and Footer Content.  The Main Content of the webpage is likely to change more often than Header Content Div., Form Div., and Footer Content Div., depending on the type of website you operate.  So when you change the content of the Main Content division, the content will instantly change on all of the associated pages where these divisions tags are placed on your webpages, but the information in the Header, Form Area and Footer Content divisions will not change.
  10. The division areas of the webpage can then be supported by internal or external cascading style sheets.
  11. But because your homepage is a single page use page with no like pages, it makes no sense to place division tags on your home page, other than to create divisions simply to manage the divisions individually.
  12. Division tags are mainly for multi-individual non-shared pages like your personal Facebook page when you sign into Facebook.  This is your personal page, but the billions of other pages share the very same basic design underneath.
  13. When you employ the div tags, you must also employ the id tag, create a personal selector, and then place a # sign in front of each selector to give each division its very own identity, so each declaration in the style sheet knows which division to apply its styles.
  14. A rule set consist of a selector and a declaration where its property and property
  15. In the style sheet in Text-Editor/CODE PAGE II, there are four rule sets stated between the opening <style> and closing </style> tags.

Email Tag coming

Text Editor/CODE PAGE: I
<html>
<head>
<meta name=”description” content=”a description of what your website does”>
<meta name=”keywords” content=”Place all of your website’s keywords here.”>
<title>WEBSITE NAME and SLOGAN</title>
</head>
<body>

<p>The boy and his two dogs ran down the street after the truck.</p>
<p><b>The <u>boy and his two dogs</u> ran down the street after the truck.</b></p>
<p>But notice that the closing body tag is different from the opening body tag.  The closing body tag has a backward facing slash mark in it, and the opening body tag does not.  If this slash mark is missing, the text that resides between the two body tags will not present on the web page correctly when viewed in a browser.</p>
<br/>
<br/>
<br/>
<p>But notice that the closing body <b>tag</b> is different from the <b>opening</b> body tag.  The closing body tag has a <u><b>forward slash mark</b></u> in it, and the opening body tag does not.  <b>If this slash mark is missing</b>, the text that resides between the two body tags will not present on the web page correctly when viewed in a browser.</p>
<p>Below are the final four choices:</p>
<ul>
<li>Pecans</li>
<li>Walnuts</li>
<li>Cashews</>
<li>Pistachios</li>
</ul>
<br/>
<p>Below are the top six fruits in America:</p>
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Watermelon</li>
<li>Cherries</li>
<li>Strawberries</li>
</ol>
<br />
<a href=”aboutus.html”>About Us</a>
<a href=”contactus.html”>Contact Us</a>
<a href=”feedback.html”>Feedback</a>
<table>
<tr>
<td></td>
<td></td>
</tr>
<td></td>
<td></td>
</tr>
<td></td>
<td></td>
</tr>
</table>
<br />
<br />
<form>
<table>
<tr>
<td>First Name:</td>
<td><input type=”text” name=”FirstName/></td>
</tr>
<td><Last Name:</td>
<td><input type=”text” name=”LastName/></td>
</tr>
<td><Middle Name:</td>
<td><input type=”text” name=”MiddleName/></td>
</tr>
<td><Telephone:</td>
<td><input type=”text” name=”Telephone/></td>
</tr>
<td><Cellphone:</td>
<td><input type=”text” name=”Cellphone/></td>
</tr>
<td><Email:</td>
<td><input type=”text” name=”Email/></td>
</tr>
</table>
</form>
</body>
<html>

 

Web Browser/DESIGN PAGE I

The boy and his two dogs ran down the street after the truck.

The boy and his two dogs ran down the street after the truck.

But notice that the closing body tag is different from the opening body tag.  The closing body tag has a backward facing slash mark in it, and the opening body tag does not.  If this slash mark is missing, the text that resides between the two body tags will not present on the web page correctly when viewed in a browser.

(The three break tags caused this spacing.)

But notice that the closing body tag is different from the opening body tag.  The closing body tag has a forward slash mark in it, and the opening body tag does not.  If this slash mark is missing, the text that resides between the two body tags will not present on the web page correctly when viewed in a browser.

Below are the final four choices:

  • Pecans
  • Walnuts
  • Cashews
  • Pistachios

Below are the top six fruits in America:

  1. Apples
  2. Oranges
  3. Bannanas
  4. Watermelon
  5. Cherries
  6. Strawberries

About Us (not active)
Contact Us (not active)
Feedback (not active)

Table (three columns and three rows)

Form (six form labels and six single-line input fields inside of a table)

 

Division Tags

Text Editor/CODE PAGE II (Template)

<html>
<head>
<title>Website Name and Slogan here.</title>
<meta name=”description” content=”Place descriptions of your website here.”>
<meta name=”keywords” content=”Place your website’s keywords here.”>
<style> type=”text/css”>
#header {place code for division here} rule set 1
#main {place code for division here} rule set 2
#form {place code for division here} rule set 3
#footer {place code for division here} rule set 4
<style>
</head>
<body>

<div> id=”header”
Header Content Here
</<div>

<div> id=”Main”
Main Content Here
</<div>

<div> id=”form”
Form Here
</<div>

<div> id=”footer”
Footer Content Here (grey footer area at the bottom of Microsoft.com)
</<div>

</body>
</html>

 

Copyright 2018         RED ZORRO sm         All Rights Reserved.