Loading...

HTML basics

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article applies to CS-Cart versions:
  • 3.0.x

HTML (Hypertext Markup Language) is a markup language for web pages. In general HTML is a set of instructions for a browser on how to display a document. A single instruction is called tag. HTML tag consists of the name and attributes. Each tag is enclosed in angle brackets (“<” and “>”). For example, <head> or <title>. Tag attributes define various properties for the tag. For example, the <img> tag takes a src attribute to provide the ocation of the image and an alt attribute to give the alternate text for those not loading images:

1
<img src="cscart_logo.gif" alt="Copyright 2004-2009 CS-Cart.com">

 

An element has three parts: a start tag, content, and an end tag. All end tags are preceded with a forward slash (/). For example, the title element has a start tag, <title>, and an end tag, </title>. The start and end tags surround the content of the title element:

1
<title>CS-Cart Shopping Cart Software</title>

Any HTML document starts with <html> and ends with </html>.

Let’s consider the structure of an HTML document:

1
2
3
4
5
6
7
8
9
10
<html>
        <head>
        <title> CS-Cart Shopping Cart Software</title>
        <meta>Efficient solution for your e-business</meta>

        </head>
        <body>

        </body>
</html>

 

The html element contains two parts: head and body.

The head contains information about the HTML document and it is not displayed in a browser. It can contain the following elements:

  • <title></title> - element gives the document title (displaying as a browser window title);

  • <meta></meta> - element provides metadata such as a document's keywords, description, and author. This information is used by search engines.

  • <link> - element defines document relationships. Any number of <link> elements may be contained in the head of a document.

For example,

1
<link rel=stylesheet href=/skins/CUSTOMER_SKIN_NAME/customer/styles.css” type=text/css”>

In this case document styles will be loaded from the external style sheet file styles.css.

  • <style> - the style element embeds a style sheet in the document. Any number of <style> elements may be contained in the head of a document.

The body contains the document content, which will be displayed in browser. It can contain the following elements:

  • <h1></h1> - heading of the document (you can change heading font size from h1 (the biggest) to h6 (the smallest)).

  • <em></em> - tag emphasizes one or more words.

  • <i></i> - tag suggests that text be rendered as italic text.

  • <b></b> - tag suggests that text be rendered as bold text.

  • <u></u> - tag suggests that text be rendered as underlined text.

  • <p> - element defines a paragraph. The closing tag for p is optional.

  • <br> - element forces a break in the current line of a text. The br element never needs an end tag. In general, elements that don't take end tags are known as empty elements.

  • <table></table> - this element defines a table for multi-dimensional data arranged in rows and columns.

For example,

1
2
3
4
5
6
7
8
9
10
<table border=1”>
<tr>
      <td>Header 1</td>
      <td>Header 2</td>
</tr>
<tr>
      <td>1</td>
      <td>2</td>
</tr>
</table>

The table will be displayed in a browser in the following way:

Header 1 Header 2
1 2

 

<tr></tr> - the tr element defines a table row.

<td></td> - the td element defines a data cell in a table.

The border attribute specifies the border width.

 

Among other attributes of the table element are cellpadding and cellspacing. The cellpadding attribute increases the amount of padding for all cells. And the cellspacing attribute sets the space between the cells.

For instance: <table border="1" cellpadding="10" cellspacing="10">

 

Using the width attribute you can set the width of the table. The value is either the width in pixels or a percentage value representing the percentage of the space available between the left and right margins.

For instance: <table border="1" cellpadding="10" width="80%">

 

You can change alignment using the align attribute, which can be added to each cell or to the row (tr element). It is used with the values "left", "center" or "right". See the example below.

The valign attribute plays a similar role for the vertical alignment of cell content. It is used with the values "top", "middle" or "bottom", and can be added to each cell or row.

1
2
3
4
5
6
7
8
9
10
<table border=1”>
<tr align=”center”>
       <td>Header 1</td>
       <td>Header 2</td>
</tr>
<tr align=”center”>
       <td>1</td>
       <td>2</td>
</tr>
</table>

 

  • <ul></ul> - tag defines an unordered list.

For example,

1
2
3
4
5
<ul>
<li>First list item
<li>Second list item
<li>Third list item
</ul>

As a result, the browser will display the following list:

First list item

Second list item

Third list item

<li> - the element defines the actual items of the list.

  • <ol></ol> - tag defines an ordered list.

For example,

1
2
3
4
5
<ol>
<li>First list item
<li>Second list item
<li>Third list item
</ol>

As a result, the browser will display the following list:

1. First list item

2. Second list item

3. Third list item

  • <a></a> - tag denotes an anchor - a hypertext link or the destination of a link. The href attribute specifies a hypertext link to another resource, such as an HTML document or a file.

For example,

1
2
<a href=”http:/www.cs-cart.com”>Click here to contact us</a>
<a href=”http://cs-cart.com/trial.html?mode=get&version=4&format=zip”>Click here to download file</a>
  • Comments in HTML have a complicated syntax that can be simplified by following this rule: Begin a comment with "<!--", end it with "-->", and do not use "--" within the comment.

For example,

1
<!-- An example comment -->

 

For more information on HTML you can use the following references:

http://www.w3c.org – W3C HTML website.

http://www.w3.org/TR/html4/html40.zip - HTML 4.0 Reference.

http://validator.w3.org - HTML Validation Service.

 

<< Read previous Read next >>