HTML in 30 Pages

  • HTML in 30 Pages is a brief e-booklet of fewer than 4,000 words, designed to get you into HTML as fast as possible, as easily as possible.
  • There is no bull in this Micro-Manual by popular online teacher U.Q. Magnusson. For those who need to quickly ramp up on HTML, but have no time to plow through a 600-page tome, this is for you.
  • From the very first page you will learn about the basic concepts of HTML, including formatting, arrangements, links, and CSS.
  • Simple yet comprehensive examples follow as you zip through. Each is explained in pithy detail, building upon themselves, and culminating in the construction of a website that is every bit the equal of any on the Internet.


Available From


Sample Chapter

Swipe the page from right to left.

Basic Web Page

For our example, we will make a fictional company called Magnum Kinetics, which makes wheels. We will construct a basic web page using our HTML tags. Then, we will buff it up with some formatting tricks called CSS. Finally, we will install a background and some official linkage to make it professional. When we are done, you will see how simple HTML really is.

If you want to see our finished website right now, go to As you examine this, keep in mind that you can substitute your own content into this structure to make your own website.

We will start with the basic structure we discussed earlier. The first section of the file is our <HEAD>, which includes the various <META> tags. The second section is our <BODY>, which includes the displayable content.

Note the various attributes which modify the <TABLE>, <TR>, and <TD> tags. These attributes of “width”, “cellspacing”, and “align” define the dimensions and placement of the table elements in our web page. Also note the <IMG> tag which defines a floating JPEG image around which the text can wrap.

Here is the resulting web page:

Using CSS

In 1990, our simple website was state-of-the art. Today, though, it is primitive. It needs style. However, you don’t want to have to define the font-face and everything else in every element you create. The trick is to define a particular style in one place so you can use it everywhere just by referring to its name. We call this trick Cascading Style Sheets, or CSS.

Don’t be intimidated. Your CSS file is just another file into which you will type some instructions. By including it in your HTML file (which we'll show you how), you will be able to apply all your styles eveywhere.

Here is an example of a font style you would type into your CSS file:

In this example, you are defining a style called “style1”, which includes the font-family, font-size, and color, though there could be many other attributes as well. You need to preface your style name with a period ‘.’ to indicate that it is a “class with global scope”. (Don’t worry about global versus local scope; just remember the period).

In case you were wondering about the “font-family”, you should be advised that it would be defined in another browser-specific CSS file. By “browser-specific”, we mean that different browsers (Chrome, Internet Explorer, etc.) use different inputs to do the same thing. For instance, FireFox uses TrueType (TTF) fonts while Internet Explorer uses Embedded OpenType (EOT) fonts. Therefore, you have to define the font-family resources in different CSS files for FireFox and Internet Explorer.

Say you want to use the odd font of Neuropolix. Since this font is generally accessible only via its font files, you will have to define these differently via the “src” attribute.

To use neuropolix for FireFox:

To use neuropolix for Internet Explorer:

You will end up with several CSS files, which you may name whatever you wish. You will have a common file called, for example, “HTML30_ALL.css”, and several browser-specific files, called “HTML30_FFX.css” (for FireFox) and “HTML30_IE.css” (for Internet Explorer).

To get different browsers to play nice with your website, you will include these CSS files “conditionally”, so that your web page will conform to different browsers’ requirements. Add this section of HTML code to your <HEAD> section. As you do so, note how it looks for the presence of Internet Explorer (IE) to determine which file to use, while the default CSS file is added at the end:

Here is our website's complete CSS file HTML30_ALL.css:

Here is the FireFox CSS file HTML30_FFX.css:

Here is the Internet Explorer CSS file HTML30_IE.css:

To assign a formatting style to an element in your website, you must assign the name of your style (minus the period) to its tag's “class” attribute, like this:

Here is the complete HTML file:

Here is the resulting website:


Java | SQL | C | HTML | Blog | Download | Contact Us
Copyright © 2012 UberQueue LLC.