Select file to convert
Select conversion type
  • Type your e-mail address
    We guarantee that your email address will never be sold, rented or given to a third party. Without any exceptions.
Convert file & Send e-mail

The How To Guide To Learning HTML

Table of Contents

Introduction

This informational resource is designed to teach you everything you need to know so that you can begin building your own customized web pages in standard HTML 4. HTML stands for Hypertext Markup Language and is the standard language that browsers and web servers understand. It was designed to present and format text on screen and does just that.

In order to begin you need to have some HTML tags (tags henceforth) that tell the computer that the page is written in HTML.

Here is an extremely basic web page:

<HTML> <!-- This tells the computers that the page is written in HTML-->

<HEAD> <!-- This is the opening portion of the page that is not seen when displayed -->

</HEAD>

<BODY> <!-- This is the main portion of the page that is seen by the user -->

   Welcome!

</BODY>

</HTML>

Notice that <!-- NOTE --> was used. These are known as comment tags. Anything within <!-- and --> will not be processed by the web server in an HTML page. The page above would simply display:

Welcome!

Now let's get into making those web pages more interesting than just a simple message. But first we need to continue our look at some technical aspects of the HTML language and document.

Top-level Elements

All tags are enclosed in brackets <> and closed with a /tagname i.e. <HTML> </HMTL>

<html>

Everything within this tag is part of the HTML document. There are two standard pieces to the document (see below). The tag is closed with </HTML>

<head>

The header information for the document including metadata like title, keywords, scripts (see below), and style sheets (see below).  Closed with </HEAD> or a preceding <BODY> tag. Below is a list of tags normally used in the Header area:

Example:

<META name="Author" lang="en" content="Christophor Rick">

An example of a complex <HEAD> area of an HTML document:

<HEAD>

<META name="keywords" Content="html,tutorial,overview,css,reference">

  <META name="Author" lang="en" content="Christophor Rick"> 

 <TITLE>HTML 4 Overview</TITLE>

  <META name="copyright" content="&copy; 2010 Company Name">

</HEAD>

<body>

The document body. Everything within the body tag will be rendered by the web server (except for comments, see above). The tag has attributes that are defined for the whole page. The tag is closed with </body>

  Attributes of the Body Tag: Attributes define particular parts within a tag. These will be applied to the entire page but can be overridden by using some text-specific tags later.

Here is an example of a BODY tag with attributes defined:

<BODY bgcolor="Black" background="/background.jpg" text="White" link="Blue" vlink="#00ff00" alink="Orange">

Alternately, this could all be done with a Cascading Style Sheet (CSS) or in the <HEAD> tag like so:

<HEAD>

<STYLE>

body {
bgcolor: Black;
background:URL(background.jpg);
text: White;
link: Blue;
vlink: #00ff00;
alink: Orange;
}

</STYLE>

</HEAD>

See Styles for inline and style sheet usage.

^ Back to ToC ^

Styles

With HTML 4 also came style sheets and cascading style sheets. The difference between the two is that one can be applied to a single page while the latter is a separate file and can be included and applied to all pages on a given website. Below are examples of what both an inline style sheet and an external CSS file may look like.

As stated above, the <HEAD> tag of an HTML document is able to hold style information, but you can also put in inline within the <BODY> tag as well.

An inline style is formatted slightly differently than a style sheet. For example, if we want to style a table with an inline style it might look like this:

<table style=" width: 100%; height: 300px; border: 1px;">...</table>

That inline style would only be applied to that single table. Notice that the entire style is included in a style attribute within the <table> tag itself.

However, the power of styles and CSS come in when you use it in the header or in a different file. This allows styles to be applied to all instances of HTML elements.

Here is an example of an external cascading style sheet. Comments, unlike HTML are enclosed in /* and */:

body {
  background-color: inherit; /* background color */
  color: inherit; /* text color */
  font-family: Arial; /* font name */
  font-size: medium; /* font size */
  margin: 0px 0px 0px 0px; /* top right bottom left */
}
input, textarea, select { 
  font-family: Arial; /* font name */
  font-size: medium; /* font size */
}
a:active {
  color: Red; /* active link color */
}
a:link {
  color: Blue; /* link color */
}
a:visited {
  color: White; /* visited link color */
} {literal}

The format for CSS styles is

Selector

Selector is the HTML element to be styled and the property is the attribute. There must be a colon : between the property and value and each pair must be closed with a semi-colon ; All of the attributes for a specific Selector must be enclosed in bracket {literal} { }

There are numerous resource on the web, in print and software that are available to teach, assist and validate CSS.

^ Back to ToC ^

Special Inline Elements

Some elements and tags were created to serve a specific purpose that does not deal with the display or arrangement of text but include other parts necessary or useful in an HTML document.

<A> - Anchor, defines an interactive link to a portion of the same document or to other documents or files. Must be one of a specific set of linktypes  Attributes include: NAME, CHARSET, ACCESSKEY, TABINDEX, ONFOCUS, ONBLUR, TARGET and several specific attributes below:

Examples

A link within the same document:

<a name=Top>Top</a>

<a href="#top">Back to Top</a>

A link to another document:

<A HREF="example.html">Example</A>

A link to compose an email in the default email program:

<A HREF="mailto:example@domain.com" TITLE="Feedback on The Big HTML 4 How-To">example@domain.com</A>

<applet> - Defines the parameters and location of a Java Applet. Attributes include: WIDTH, HEIGHT, NAME, ALT, ALIGN and

<BDO> - Defines an override to the standard bi-directional algorithm that defines left-to-right and right-to-left for certain languages. More information at W3C.

<BR>- A line break, like a carriage return in word processors.  Example: <p>This text is<br>broken</p>

This text is

broken

<IMG> - Defines the placement and display of an image. Attributes include: SRC, ALT, WIDTH, HEIGHT, USEMAP, ISMAP, NAME and LONGDESC which is a longer description of the image than the ALT tag provides. Generally supported formats are .gif .jpg and .png

<object> - Defines an object to be included in the document. Generally including video, audio Java and Flash. Attributes include: ARCHIVE, CODEBASE, WIDTH, HEIGHT, NAME, USEMAP, TYPE, TABINDEX and the following

<PARAM> - Provides additional parameters for embedded objects. Attributes include: NAME, VALUE, VALUETYPE (data, ref, object), TYPE and ID. More information at W3C.

<SCRIPT> - Defines a client-side script to be included when the page is loaded. Generally used to include Javascript that is contained in separate files. Attributes include: TYPE, SCR, CHARSET and DEFER which means that the execution of the script can wait after the rest of the document is rendered. More information at W3C.

<SPAN>- A generic inline container used to apply styles to the contents of the span. Used when no other inline element can be used to properly style the contents. Can only contain inline elements. <DIV> is the block-level equivalent.

^ Back to ToC ^

Text Formatting

Now that we have taken a look at the basics of the technical tags for HTML, it 's time to work with some text. Though images, sounds and video can all be displayed on web pages, text is still the most prevalent form of information transmission and so it is still important to know how to make it look good. Styles for text can be directly applied to specific text inline with HTML. Common text decorations include bold, emphasized, italic, strong, big, small, sub and superscript.

Inline Elements - Font Style

<b> - Bold, to give a heavy visual style to a specific piece of text <b>Bold</t> would give you Bold

<strong> - Strong, will also give the appearance of bold but generally refers to the text being given more importance than the surrounding text.

<i> - Italic, will italicize, or give a lean to, some text.

<em> - Emphasis, Also looks like Italic in most browsers but again is meant to impart more importance for some text

<big> - Makes text bigger than the surrounding text Can be nested to produce even bigger text.

<big>Big</big> Big <big><big>Big</big></big>  Big

<small> - Makes text smaller than the surrounding text. Can be nested to produce even smaller text. <small>Small</small> Small

<sub> - Subscript, to place words lower and smaller than the standard text

<sup> - Superscript, to place words higher and smaller than the standard text.

<u> - Underline, draws a line beneath the text, similar to <ins> but without the implication that the text was inserted.

<code> - Commonly used to show examples of HTML and other programming code. Uses a fixed width (monospace) font (see wikipedia for font list).

<tt> - Teletype Text, this is text that is rendered in a fixed width font.

<kbd> - Keyboard, used when denoting directions and giving commands to type in a keyboard. Uses a Fixed Width Font

<q> - Short Quotation, inserts quotation marks around a piece of text denoting a quote from another source.

<cite> - Citation, shows that you are citing another source. Places the text in Italic. Commonly used for copyright lines on web pages.

<var> - Variable, denotes when you are talking about a computer programming variable. Used for demonstrating programming code, not for actual coding.

<bdo> - Text direction, choices are rtl - right to left meaning the text will display backwards. and ltr - left to right, standard for most languages.

<abbr> - Abbreviation, used to show that some text is an abbreviation.

<acronym> - Acronym, abbreviations spoken like words.

Block-level text elements

<address> - Address, used to define contact information, generally about the creator of a webpage.

Company XYX

1313 Mockingbird Lane

52010

<blockquote> - Block Quote, shows that the text itself is a long quote from another source. Indents the entire block of text.

Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

<ins> - Inserted, draws a line beneath the text. Used in conjunction with <del> it represents text that was inserted into a document during a correction.

<del> - Strikeout, used when you want to show a correction was made do a piece of text. (Deprecated forms <strike> or <s>)

<pre> - Preformatted, replaced <listing>, <xmp> and <plaintext>. Allows spaces and carriage returns (/n for demonstration) to be preserved when rendering the text.

This   is  Preformatted

Text.

Headers

Headers have their own special set of tags which are based on the size of the header. They are used for showing that a section of sub-section of a document is beginning.

<h1> -  Header level 1 - A main section - <h1>Header 1</h1>  Header 1

<h2> -Header level 2 - A sub-section of an H1 section - <h2>Header 2</h2>  Header 2

<h3> -Header level 3 - A sub-section of an H2 section - <h3>Header 3</h3>  Header 3

There are actually 6 levels of headers <h1> to <h6>. They all contain the Align attribute with values: Left, Right, Center and Justify. This moves the header to the specified area of the line it is on. Headers can be styled with Inline styles and CSS (see Style section).

Font - Deprecated

The <font> tag was used to define aspects pertaining to the font that will be displayed on the HTML document when it is rendered. It has been deprecated in HTML 4. Instead it is recommended that you utilize style sheets (below). The font tag contained several attributes which included size, face and color.

^ Back to ToC ^

Text Containers

There are certain containers that allow you to manage text in HTML 4. These let you create groups of text and then you can apply styles to each one specifically by using a naming convention.

<p> - Paragraph - Groups a piece of text together in a paragraph. Styles can then be applied to entire paragraphs via styles and style sheets. (see example below)

<DIV>- Division, a generic block-level container. It allows styles to be applied to a block of content. Inside of a div can be other block-level elements (like div, span, p) and inline elements (see Text above). Headers are also considered block-level elements. A DIV can have an ID and a class, both of which can have styles applied to them separately. A DIV can also be inside of another block-level element.

Example:

<div id="test"> <!-- test is the name that will be used to apply styles-->

  <h1>A Block-level header</h1>

  <br> <!-- HTML tag to force a line break-->

  <p id="Para1"> Everything in this will be grouped together like a paragraph. No matter how many sentences or words. That is a block-level elements job.</p>

  <p ="Para2">This will begin a new paragraph and so this text will be separate from that above</p>

</div>

<center> - A block element that will be centered on the page. It is technically shorthand for <div align=center> Deprecated in place of style sheets. It can contain other block level and inline elements but it is suggested that it not be used.

^ Back to ToC ^

Tables

Tables are used to display multi-dimensional data (arrays) or to organize text into rows and columns. In order for a table to be complete it must have at least one Row and one Cell.

<table> - The opening tag for a table. Attributes can be specified in the tag but are better used in the style sheet. Must be closed with </table>.

Attributes include:

<tr> - Tag for a table row. Used to organize cells into a row. </td> Attributes include:

<td> - Tag for a Table Data cell. Must be closed with </td> Cells are held within rows.

Example - Basic Table, 1 row, 2 cells

<TABLE>

<TR>

  <Td>Text 1</Td>

  <Td>Text 2</Td>

</TR>

</table>

Result: