:: KBs ::

Introduction to HTML

Created Date: 4/23/2008
Last Modified Date: 4/23/2008
HTML is a markup language created to template out document style interfaces to others. The language is highly used as the backbone to almost all websites upon the internet.

What is a Tag?

What is a tag? A tag is the most basic component within an HTML document. It describes the start and the end of what characteristics a certain area has. These items are placed within brackets (< and >). These tags allow the site designer to tell the web browser to display out the information.

Components to HTML Document

HTML is a language that has a defined basic structure. The two major components are the head and the body.

Head

The Head is the part of the document that explains basic information about the web page. This information can be meta data (information describing information) or the title. The title is the name of the page that will be shown at the top of the web page.

An example of what a head looks like is the following:

<head>
   <title>Name of Page</title>
</head>

Body

The body of an HTML document is the part that is shown to the user. This is the ‘meat and potatoes’ of the page. A page can be extremely basic, with just text, or it be detailed with images, links, and font characteristics. The basic site will be laid out below.

<body>
The information about the site here.
</body>

Paragraphs

Paragraphs provide a simple way describing information in blocks. Like a paragraph written on paper, a paragraph has a definitive start and end. In order to describe it a paragraph tag needs to be placed around it. A paragraph tag is <p>.

An example of this would be the following.

This is a paragraph. It can consist of one of many sentences.>

Headers

A header is a way of describing a certain section of code. There are 7 different levels of headers. The highest (most generic) is described at h1. The smallest is described as h7.

<h1>


<h2>


<h3>


<h4>


<h5>

<h6>

<h7>

Font Customization

Font customization is a big deal in website design. It can help make or break how a site is portrayed by others. There are a couple of basic font customizations that will be covered here. Other types of customization are available and are widely described on the internet.

Bold (<b>) – Any text within this tag will have a bold appearance.
Italics (<i>) – This will make the text have an italics appearance.
Underline (<u>) – This will allow text to be underlined.

An example of the three items used are the following:

The <b><b>FAST</b></b> dog ran through <u>the</u> street.

Links

Links obviously can turn multiple web pages into a web site. In order to get items to navigate links have to be created. When HTML was first created the original term was called anchors. Because of this the item to describe an anchor was ‘a’.

Unlike previous types an anchor has an attribute. An attribute is a term that is used to describe information that is contained within a tag. In this case the attribute is one for a hypertext reference (href). This reference is the point that is used to describe where the document is located.

An example is used
<a href=’otherpage.html’>link</a>

otherpage.html – This is the name of the page that is link will take it to.
link – This is the information that will appear as a link.

Images
Images are highly important to a site design / layout. Like links they also contain an attribute. This attribute is the source (src).

An example of this is the following:

<img src=’image.jpg’>

image.jpg – The name of the file to be shown as an image.

Tables

Tables one of the most useful items to place information together. They can allow data to be displayed as grids among other things. There are 3 main tags to a table. The first being the table tag. This tag describes the outermost element of a table. The layer of tags is the table row tag (tr). This tag is used to describe the rows (vertically displayed) within a table. Within the table row there is even another tag describing data. This is called the table data (td). One important part in the basics of table design is the fact that all table rows should have the same number of table data elements.

<table>
   <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
   </tr>
   <tr>
      <td>data 1a</td>
      <td>data 2a</td>
      <td>data 3a</td>
   </tr>
   <tr>
      <td>data 1b</td>
      <td>data 2b</td>
      <td>data 3b</td>
   </tr>
</table>


   
      
      
      
   
   
      
      
      
   
   
      
      
      
   
column 1 column 2 column 3
data 1a data 2a data 3a
data 1b data 2b data 3b

:: HTML ::