STEP 3

left arrow
To Step 2
Home page >> Step 3 >> HTML
HTML

Introduction to HTML

The internet (or otherwise World Wide Web) is essentially based on HTML which is a common "language" which handles the interpretation and the presentation of the information transferred to the visitor of a website providing the "communication language" between you (your site) and your visitor. HTML stands for HyperText Markup Language and it provides a means to describe the structure of text-based information in a document (by denoting certain text as links, headings, paragraphs, lists, and so on) and to supplement that text with interactive forms, embedded images, and other objects. Files and URLs containing HTML often have a .html or .htm filename extension (there are also other extensions as we will see in the User Interaction section). HTML files are simple text files! If you open an HTML file using a text editor, you will see that it is comprised of text within tags, surrounded by angle brackets. HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code (such as JavaScript) which can affect the behavior of Web browsers and other HTML processors.

The computer programs which are used to interpret the HTML files are (as we also saw during the basics section of step 1) called browsers. A browser reads these text files and converts them in presentable to the user information (tables, images, fonts, paragraphs, etc.).

Although HTML is a "language", I would not call it a programming language with its formal meaning though! With HTML you do not create a program, but instead you create pages which can be linked together. It is much simpler than a programming language. It is just a "content description" language. You do not have to be an experienced programmer to write a simple HMTL page. We will see later though that for more complex functions (interaction with the user, e-commerce applications, etc.), HTML is combined with other languages, but HTML as HTML still remains very simple.

Your fist HTML web page

To just prove to you how simple HTML is, it is time to write your first HTML web page. Are you ready? Just open a new text file using the editor of your choice (for example if you are using Windows, open a new .txt file using Notepad). Write the following code and save the file as "helloworld.html" in your "C:" drive or your desktop:

<html>
      <head>
            <title>Hello World title</title>
      </head>
      <body>
            Hello World!
      </body>
</html>

Indentation plays no role in the interpretation of the code. You could have written all of the above code in a single line and the result would have been the same. By indenting your code and separating the different parts thought, your code becomes more readable, thus allowing for easier maintenance and easier future alterations.

By either double-clicking on the "helloworld.html" file icon, or by opening the browser of your choice (i.e. Microsoft's Internet Explorer, although my personal favorite is Google's Chrome) and clicking on File -> Open and then finding the file "helloworld.html", you will get the text "Hello World!" on a white page.

Hello World

Congratulations! You just created your first html web page!

Regarding naming your files, you should know that the default file name which the web server is looking for in any directory is the file index.html or default.html therefore home page file names are usually named that way (otherwise you need to tell your Server which file to lookup when your home page is being accessed).

HTML elements (parts and tags)

Every HTML web page is characterized by the following:

  • Tags which are markup surrounded by angle brackets like <html> in our Hello World example. They denote where something starts and where it ends.
  • HTML tags normally come in pairs like <html> and </html>, where the first tag in a pair is the start tag, the second tag is the end tag. The element content is everything between the start and end tag.
  • Each tag which starts, must also end (the end is indicated with a "/"). Not all tags have a separate end tag (like <br> or <img...>), but these tags end as well within the same tag (<br /> and <img... />).
  • As you can see from our Hello World example, the html code (always) starts with an "html tag" (<html>) an ends with one as well (</html>).
  • The HTML code is divided into 2 main parts. The first part of the HTML is its head section (between <head> ... </head>). The head section contains information and the description of the page (like its title, meta tags with information, character encoding, if it is using a stylesheet - we will see more on stylesheets at a later section -, etc.). In our first example you see that the head section contains the title (between <title> ... </title>) which is essentially the web page description which appears on the top window bar of your browser and also on the tab bar of your browser. The title should contain a meaningful, rather small, title for your web page. Apart from the title (which as we said appears on the browser), no other head information is visible to your visitor.
  • The second part of the HTML file is its body section (between <body> ... </body>). The body section contains all of the visible to your visitor information and content.
  • Tags must be lowercase (requirement for the xHTML which is the latest version of HTML)
  • All parameters in tags must be in quotes
  • As we said, self-closing (standalone) tags must end with a forward-slash (which must be preceded with a space!)

Basic HTML tags

Now that you have learned about the use of HTML tags, below you will find a list of basic HTML tags which are going to become handy in your day-to-day website development in order to format your content (and are the ones you should initially focus on while learning to create your site):

Tag Description
<html></html> Defines an HTML document
<body></body> Defines the document's body
<title></title> Defines the title for your HTML web page (not displayed on the page but on the browser's window title. It is also how the page appears on the browser bookmarks)
<meta /> Defines content about the document that doesn't need to be displayed on-screen (like the document encoding which is especially useful if your page has non-latin characters like Greek, Russian, Chinese, etc.)
<h1></h1> to <h6></h6> Defines header 1 to header 6
<p></p> Defines a paragraph
<br /> Inserts a single line break
<hr /> Defines a horizontal rule
<div></div> Defines a general purpose box that takes up the full width of the space it's in. This is a very commonly used tag, especially in combination with CSS
<span></span> Similar to the div tag, but it does not take up the entire box area, but rather it wraps around the content which lies in-between
<strong></strong> Defines a section of text that you want to be stressed. Normally rendered as bold in web browsers
<em></em> Defines a section of text that you want to be emphasized. Normally rendered as italics in web browsers
<b></b> Defines a section of text that you want to be bold. Avoid using it though and prefer to use <strong></strong> instead
<i></i> Defines a section of text that you want to be italics. Avoid using it though and prefer to use <em></em> instead
<u></u> Defines a section of text that you want to be underlined. This tag is depreciated. Underlined text should be avoided to use in general (due to confusion with links) and if used, to occur via a style definition
<img /> Inserts an image on your page. More on how to use this tag later on this section
<table></table> Defines a table. More on how to use this tag later on this section
<ul></ul> Defines an unnumbered (bulleted) list. More on how to use this tag later on this section
<ol></ol> Defines a numbered list. More on how to use this tag later on this section
<!-- ... --> Defines a comment

In order to try some of them out, you can create another html file (you can call it example2.html) containing the following code:

<html>
      <head>
            <title>Basic HTML tags</title>
      </head>
      <body>
            <!-- Comment: Start of web page content -->
            <p>
                  Start of the first paragraph:<br />
                  <h1>This is heading 1</h1>
                  <h2>This is heading 2</h2>
                  <h3>This is heading 3</h3>
                  <strong>This text is in bold</strong><br />
                  <em>This text is in italics</em><br />
                  <hr />
                  Insert image: <br />
                  <img src="example2.jpg" alt="examp2 image" />
            </p>
            <p>
                  This is the second paragraph
            </p>
      </body>
</html>

Opening the "example2.html" will result in the following screen:

Example 2

If you are wondering how to do other cool stuff, like place images on your page, create tables, lists and how to link pages together, then read on...

HTML tag attributes

HTML tags can have attributes. Attributes provide additional to the tag information regarding your content which is embraced by the tag (HTML element). The HTML tag attributes are characterized by the following:

  • Attributes always come in pairs "name/value", i.e. name="value".
  • Attributes are always specified in the start tag of an HTML element.
  • Use always lowercase attributes. Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.
  • You should always quote the attribute values. Double style quotes are the most common, but single style quotes are also allowed. In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes (i.e. name='John "The Hacker" Do').

The most commonly used attributes, which will become handy in your day-to-day website development, are:

  • style: It assigns styles inline. (This is not always a good idea as we will see in the CSS section). In other words, you can assign color, background color, fonts, size and other features to your content. Example:

    The code:
    <span style="color:#FF0000; font-style:Tahoma; font-size:10px; font-weight:bold; background-color:#c8eebd;">This text on green background is bold red written in Tahoma sized 10 fonts</span>

    Results in:
    This text on green background is bold red written in Tahoma sized 10 fonts
  • name: This attribute is either used in form elements (interaction with user) so that server-side scripts can use each named variable, or if you want to create a reference within the page (on-page anchor), so that your visitor will go directly to a particular position of your page after clicking on the reference. This is especially useful if you have a very tall page containing a lot of content and paragraphs. In order to create an on-page anchor, go to the place of your page you want to place the anchor (i.e. where the visitor will be directed) and write:
    <a name="reference"></a>
    Then, go to the place of the document where you want to enter the link to the anchor you created (which will be shown to your visitor to select) and write something like:
    <a href="#reference">Go to reference</a>
  • href: This attribute stands for hypertext reference and is used to link together pages and to create links to other pages of your website, as well as to other pages of other websites. We will see some more examples at a later paragraph of this section. Example:

    The code:
    <a href="http://www.google.com" target="_blank">Google's home page</a>

    Results in a link which directs the visitor to Google's site in a new window (denoted by the attribute target) :
  • title: This attribute is being used to provide extra visual information to an element such as a button, a link, an image. It essentially implements tooltips which we saw in the Usability section. Don't confuse the title attribute with the title tag which we saw is being used in the head section of your HTML code. Example:

    The code:
    <input type="button" title="Description of the button" value=" Hover over me " />

    Results in a tooltip appearing when the mouse cursor moves over the button:
  • class: Almost any tag can have one or more classnames. The attribute class is usually used to assign to an area (tags: div, span but also others like button, etc.) styles through Cascading Style Sheets (CSS). We will see more on the subject in the CSS section. Example:
    <div class="class_name">
  • id: Anything can have an ID attribute. An element's ID is its unique identifier. There should only be one element on each page with a particular ID attribute. The ID attribute (just like the class attribute) is frequently used to assign properties through CSS. The IDs are prefixed with a hash/pound sign, to show that they applies to elements with id="id_name". Example:
    <div id="id_name">
    The ID attribute is especially useful in DHTML (Dynamic HTML) to provide information to Javascript code as we will see in the User Interaction section.

Placing images in HTML

As we briefly saw above, the <img /> tag is your tool in inserting images in your HTML document. That tag requires two attributes:

  • src: Denotes the source of your image file. This can be a relative path from the location of your HTML document. In other words if the HTML document you are writing resides under location (directory path) "A/" and the image resides under "A/images/", then the path you are going to enter to the src attribute is "./images/image_name".
    This source can even be a URL pointing to an image of another website (e.g. http://www.google.gr/intl/en_com/images/logo_plain.png). The only problem with this is that if for some reason that image is not available (e.g. the remote site is down), then your visitor will not be able to see the image.
  • alt: The alt attribute is used to define an "alternate text" for the image. The value of the alt attribute is an author-defined text and tells the reader what he or she is missing on the page if the browser can't load images (he will instead see the alt text).

Example (if you have an image named "image.jpg" under the directory "images"):

<img src="./images/image.jpg" alt="Example image" />

At this point I will revisit something I pointed out at the Basics section of Step 1. Images are much larger in file size than text files, therefore downloading images on your browser takes time. That is why you should make sure that the images you have to be displayed on your page are either JPG or GIF images and reduce their size (using Photoshop or Gimp or any other image processing tool you have) as much as possible. The advantage of using GIF is that they can handle transparency while JPG can't, but JPG images (especially photos) are smaller in size than GIFs. That is I advise you to use GIFs for icons, cliparts, etc. and for photos and other complex images to use JPGs.

Tables in HTML

A very useful structure you can declare in an HTML page is the table. Tables should only be used for rendering data that belongs naturally in a grid. I am pointing this out, because (especially in the older days of web design) a lot of people are using tables in order to define the layout of the web page. I would recommend against it (at least do not use it all the time and by itself), although it might appear simpler to use tables, and advise you to use CSS instead (loads faster than tables). What you can always do is combine the two.

The tags which you will need in order to declare a table are:

Tag Description
<table></table> Defines the start and end of the table
<thead></thead> Defines the start and end of the table head section, which includes column headers
<th></th> Defines a table heading cell, which is a column header or row header
<tbody></tbody> Defines the start and end of the main body of the table, which contains the actual data
<tr></tr> Defines the table row, used in both the table head and table body
<td></td> Defines the table cell (stands for "table data"), which holds the actual data

The use of these tags is pretty self-evident. You start a table, define the head section (although that is not necessary; you can just have a body section) and then the body section which is comprised of multiple rows and columns. Example:

<table>
    <thead>
        <th>Column 1</th>
        <th>Column 2</th>
    </thead>
    <tbody>
        <tr>
            <td>First row - First column data</td>
            <td>First row - Second column data</td>
        </tr>
        <tr>
            <td>Second row - First column data</td>
            <td>Second row - Second column data</td>
        </tr>
    </tbody>
</table>

There is a number of attributes that can be used with the table, tr and td tags. The ones that will provide most useful to you are:

  • border: Attribute for the <table> tag and denotes the thickness of the border of the table (border around all rows and columns). By default, the border is set to 0 (no border). Example of use:
    <table border="1">
  • align, bgcolor, bordercolor, valign, width, height: Attributes for the <table>, <tr> and <td> tags. They denote the alignment of the content (left, right, center), the background color (in #rrggbb RGB hex format), the color for the border (in #rrggbb RGB hex format), the vertical alignment of the content (top, middle, bottom), the width (either in % or in pixels) and height (either in % or in pixels) respectively. Example of use:
    <td align="left" bgcolor="#000fff" bordercolor="#333333" valign="middle" width="100" height="300">
  • colspan, rowspan, nowrap: Attributes for the <td> tag. They denote the number of columns a cell should span (in number of columns), the number of rows a cell should span (in number of rows) and protects against linebreaks, even though the content of a cell might be wider than the browser window respectively. Example of use:
    <td colspan="2" rowspan="3" nowrap>

An example combining some of the attributes above is the following:

<table border="1">
  <tr>
    <td colspan="2" rowspan="2">2 columns and 2 rows wide cell</td>
    <td colspan="2">2 columns wide cell</td>
  </tr>
  <tr>
    <td> </td>
    <td rowspan="2">2 rows wide cell</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

which results in:

2 columns and 2 rows wide cell 2 columns wide cell
2 rows wide cell

Although the attributes can be used at any time, I would suggest that the formatting of the table and its rows and columns are set through CSS.

Lists in HTML

Another very useful structure you can use in HTML are lists. You can either declare a unnumbered (bulleted) or numbered (bulleted) lists.

The tags which declare an unnumbered list are <ul></ul> whereas the tags which declare a numbered list are <ol></ol>. For both lists, the list items are declared by the tags <li></li>. You can have as many nested lists as you want. Example:

The code:

<! -- Comment: Unnumbered list -->
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Nest list </li>
  <ul>
    <li>Sub-item one</li>
    <li>Sub-item two</li>
    <li>Nest list again</li>
    <ul>
      <li>Sub-sub-item one</li>
    </ul>
  </ul>
</ul>

<! -- Comment: Numbered list -->
<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Nest list </li>
  <ol>
    <li>Sub-item one</li>
    <li>Sub-item two</li>
    <li>Nest list again</li>
    <ol>
      <li>Sub-sub-item one</li>
    </ol>
  </ol>
</ol>

Results in:

  • Item one
  • Item two
  • Nest list
    • Sub-item one
    • Sub-item two
    • Nest list again
      • Sub-sub-item one
  1. Item one
  2. Item two
  3. Nest list
    1. Sub-item one
    2. Sub-item two
    3. Nest list again
      1. Sub-sub-item one

The attributes that can be used with the ul and ol tags are:

  • type: Attribute for either the <ul> or the <ol> tag which denotes the type of bullet or number to be used (available values are disc, circle or square for the unnumbered list and A, a, I, i, 1 for the numbered list). Example of use:
    <ul type="disc">
  • start: Attribute for the <ol> tag which denotes the initial number from where the first list item starts counting. Example of use:
    <ol type="a" start="7">

Linking pages together in HTML

The ability of HTML to link pages together is what is attributed to essentially to the rapid expansion of the internet. Intra- and inter-site files interlinked together gives you the opportunity to create your sitemap structure you worked during step 2.

Files are linked together via hyperlinks which are defined using the anchor tag in HTML (<a ...></a>).

The two most important attributes of the <a ...> tag for linking pages together are:

  • href: This is the attribute which is used to link together pages from your site as well as your site with pages from other websites.
  • target: With the target attribute, you can define where the linked document will be opened. The target="_blank" attribute denotes that the link is going to open in a new window (advisable for links which direct the visitor out of your site, so that your site's remains still open).
<a href="link_to_page.html" target="_blank">Link to other page</a>

The other use of anchors is for jumping to "anchored" points in the same page as we saw previously in this section.

Interacting with the user

HTML provides submission components such as forms, buttons, radio buttons, etc. which you can use to build a user interaction form, but HTML alone cannot process the submitted data and produce interaction results. In other words HTML provides all the look-and-feel components but you need a "back-end mechanism" to process the data you will receive from the user.

This is being achieved with combining HTML with other web building technologies as we will see in the User Interaction section.

HTML reference

makemyownsite.com is not intended to be a mere HTML tutorial or HTML reference guide. It provides end-to-end essential and invaluable information on how to start with the idea inception, proceed to design, implement, upload, track and monetize on your site, giving you a 360 complete view on making your own site (although I am also working on putting up a full HTML tutorial and reference on makemyownsite.com as well - still not ready yet though...).

This HTML section provides you with the most commonly used, day-to-day, HTML functionality that I believe should immediately be used by you to easily start creating your site.

For more HTML tags and functionalities, I am suggesting w3school's reference guide on HTML.

Are you ready to learn about Cascaded Style Sheets (CSS)?

left arrow Back to the home of Step 3

RELEVANT LINKS

SoftXML
SoftXML as it sounds was born when XML was firstly introduced on web. We have been participating in Xml product development since XML was created. SoftXML strongly believes that XML will be as important to the future of the Web as HTML has been to the foundation of the Web. SoftXML provides a variety of Xml Products for web developers and website owners.