Free Tutorial: HTML

HTML - Website Hosting

Admin

Knowledge of website hosting is essential if you plan to make your website available for the world to see.

It's one thing to build a website using HTML, but so far in this tutorial, everything we've done has been on our own local machine. Unless you have your own web server with a permanent high-speed connection to the Internet, you'll need a website hosting provider to host your website.

If you already have a hosting provider that's great! But, if you don't, you'll need to start looking for one.

Basic Web Hosting Concepts

Whether you already have a web host or you're just beginning, you should know at least a little bit about the following hosting concepts:

The different types of web hosting (i.e the differences between shared hosting, dedicated servers, and managed hosting)
How to choose a good web hosting provider
Domain names (i.e. yourwebsite.com)
FTP - for uploading your website to the hosting provider
Availability - how to monitor your web site's availability
Technical support - what to expect from a hosting provider

It can be very difficult for a beginner to find information about this. Even some experienced web developers don't know exactly what it is their web host does. I recommend that you make some effort to become familiar with the basic web hosting concepts, such as those outlined above.

If you need a hosting provider, our partner site, ZappyHost provides some of the best prices on the web. Check out these hosting plans.

Getting your own Web Server

If you're serious about developing web pages, you should think about installing a web server (if you haven't already got one).

A web server will enable you to mimick a hosting environment. You'll be able to browse your website on your local computer using http:// and your own domain or sub-domain.

You'll also be able to do many other things, like run server-side scripts such as PHP or ColdFusion. Not to mention, connect to a database.

To learn the basics of web servers, see my quick web server tutorial.

HTML - Website Templates

Admin

This page discusses HTML website templates (basically a prebuilt website where you can fill in the blanks).

One question many people ask before learning HTML is "Do I have to be good at design?".

The answer to that is "Not at all!".

OK, if you want a career building websites, it can help if you are a good designer. But, this is not essential. Many web developers either outsource their design to a professional designer, or purchase HTML website templates. They prefer to concentrate on building the actual website rather than designingthe website.

An HTML website template is basically a prebuilt website, where you, the developer, can modify as required. All the HTML/CSS code and images are included in the template, and a good template will be compatible with most modern browsers.

Benefits of Using a Website Template

Here are some benefits of using an HTML website template:

Speeds up development time: You don't need to spend hours designing your website, then converting that into code, then checking for browser compatibility etc.
More professional looking website: Unless you're a very good designer, it will be difficult to achieve a great looking website every time. And, if you're not a good designer, your websites will reflect this.
Learning: Using an HTML website template is a great way to learn from other developers. Once you've downloaded the template, you have full access to the code, so you can learn the tricks the developers used in achieving an effect.
Cheap: Well, cheaper than hiring a professional designer.

Free Website Templates

Quackit provides a large selection of free website templates. You can choose from a list of simple templates, or more advanced templates depending on your level of comfort and the layout that you need.

Here are some of the free templates available for download.

Layout Templates

These provide a basic webpage layout that allows you to add your own branding etc.

View Source Code | Preview

View Source Code | Preview

View Source Code | Preview

Website Templates

These templates are more like a finished website and are built using the (responsive/mobile-first) Bootstrap stylesheet, which can save you an enormous amount of time in building a responsive website.

Download | Preview

Download | Preview

Download | Preview

HTML - Scripts

Admin

In HTML, a script is a small, embedded program that can add interactivity to your website. For example, a script could generate a pop-up alert box message, or provide a dropdown menu.

Because HTML doesn't actually have scripting capability, you need to use the <script> element to declare a script, using a scripting language.

The opening and closing <script> tags tell the browser to expect a script in between them. You can specify the language using the type attribute. However, this is optional if you're using JavaScript, as JavaScript is the default value. JavaScript is also the most popular scripting language used on websites.

Adding a Script

Scripts are often placed within the <head> element. This ensures that the script is ready to run when it is called.

However, this is not a requirement, and you can also place it within the <body> element if needed.

In fact, it's often a good idea to place them at the bottom of the page, just before the closing </body> tag, as long it comes before any other scripts that might rely on it.

<script>
    alert("I am a script. I ran first!");
</script>

Try it with the Online Editor

Placing that code alone into an HTML page would result in a pop-up message as soon as the page loads. Click the button to see it run.

Triggering a Script

In many cases, you won't want the script to run automatically. You might only want the script to run if the user does something (like hovers over, or clicks a link), or once the page has finished loading.

These actions are called intrinsic events (events for short). There are many pre-defined intrinsic events that can trigger a script to run. You use event handlers to tell the browser which event should trigger which script. These are specified as an attribute within the HTML tag.

Lets say you want a message to be displayed whenever a user clicks a button. You can use the onclick()event handler to perform an action. In this example, we'll display a JavaScript alert box containing a message.

<input type="button" value="Click me..." onclick="alert('Thanks, I feel better now!');">

Try it with the Online Editor

The onclick event handler is one of may event handlers available in HTML. There are event handlers for things like mouseovers, page loads, form changes, and more.

Here's the full list of event handlers available in HTML5 for that you can use as a reference.

Calling an External Script

You can also place your scripts into their own file, then call that file from your HTML document. This is useful if you want the same scripts available to multiple HTML documents - it saves you from having to "copy and paste" the scripts into each HTML document. This makes it much easier to maintain your website.

<script type="text/javascript" src="external_scripts.js"></script>

Alternate Information for Older Browsers

You can provide alternative information for non-JavaScript browsers or browsers with JavaScript disabled. You can do this using the <noscript> tag.

Any contents provided between the opening and closing tag is displayed to the user — but only when JavaScript is disabled.

HTML Code:

<script type="text/javascript">
    alert("I am a script. I ran first!");
</script>
<noscript>
You need JavaScript enabled to view this page.
</noscript>

HTML - Layouts

Admin

Here, we look at the "right" and "wrong" way to do HTML layouts.

Most modern websites and blogs are built with a layout that consists of multiple sections. For example, a website might contain a header, footer, navbar, etc.

There are different ways to achieve these layouts in HTML.

HTML Layout using Tables Wrong!

You might be tempted to put your website's layout inside a big table. This should be avoided.

In the early days of the web, tables were a popular method for achieving advanced layouts in HTML. This involved putting the whole web page inside a big table, then nesting other tables inside that one. The outer table had a different column or row for each main section, and the nested tables contained specific items (such as a navbar, footer, etc).

Here's an example:

<!DOCTYPE html>
<!-- Don't use this code - it demonstrates how NOT to do it! -->
<html>
<head>
<title>My Example</title>
    <style>
        table {
            width: 100%;
            border: 0;
        }
        td.header {
            background-color: yellow;
        }
        td.sidebar {
            background-color: orange;
            width: 30%;
            vertical-align: top;
        }
        td.sidebar>ul {
            list-style: none;
            padding-left: 0;
        }
        td.article {
            background-color: #eeeeee;
            height: 200px;
            width: 70%;
            vertical-align: top;
        }
        td.footer {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table border="0">
        <tr>
            <td colspan="2" class="header">Header</td>
        </tr>
        <tr>
            <td class="sidebar">
            Left menu
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3...</li>
                </ul>
            </td>
            <td class="article">Main body</td>
        </tr>
        <tr>
            <td colspan="2" class="footer">Footer</td>
        </tr>
    </table>

</body>
</html>

Try it with the Online Editor

However, HTML tables weren't designed as a layout tool. Tables were designed for presenting tabular data. In fact, the W3C heavily discourages using tables for layout.

CSS should be used for determining the layout of a website or blog.

The reason this technique became so widespread is because of the limitations of CSS at the time.

More importantly, it was the limitations of browser support for various CSS properties. Not all CSS properties were supported by all browsers. But even when a property was supported by multiple browsers, the actual implementation was different. The result? What looked good in one browser often looked terrible in another.

This led web developers to throw their arms up and say "Hey, tables might not be designed for this, but at least it works in all browsers!".

HTML Layout using CSS

CSS (and browser support) has come a long way since the early days of the web. These days, browsers have much more consistent support for CSS properties for dealing with website layouts.

Also, HTML now has a number of elements that can be used for the common sections of a website. In particular, the <main>, <header>, <footer>, <nav>, and <article> tags were introduced in HTML5, specifically for providing better semantics for a website's layout.

Also, the <div> element is a generic block level element that can be used for grouping HTML elements. Once grouped, formatting can be applied to the element and everything contained within it.

Using our previous HTML layout, we can use various HTML5 elements (along with CSS) to achieve a similar effect.

<!DOCTYPE html>
<html>
<head>
    <title>My Example</title>
    <style>
        main {
            width: 100%;
        }
        header {
            background-color: yellow;
        }
        nav {
            background-color: orange;
            height: 200px;
            width: 30%;
            float: left;
        }
        nav>ul {
            list-style: none;
            padding-left: 0;
        }
        article {
            background-color: #eeeeee;
            height: 200px;
            width: 70%;
            float: right;
        }
        footer {
            background-color: yellow;
            clear: both;
        }
    </style>
</head>
<body>
    <main>
        <header>
            Header
        </header>
        <nav>
            Left menu
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3...</li>
            </ul>
        </nav>
        <article>
            Main body
        </article>
        <footer>
            Footer
        </footer>
    </main>
</body>
</html>

Try it with the Online Editor

Responsive Layouts

Another progression in modern-day web design is the practice of building responsive layouts.

Responsive layouts adjust according to the screen size being used to view the website. This means that your website will probably look different on a mobile phone vs a tablet vs a desktop computer. The website adjusts itself to provide the best layout for the screen size.

Because designing the visual layout is the job of CSS, we won't go into any more detail here. But the main thing to remember is, HTML provides the above elements (and more) to communicate the purpose of the element (eg, "article", "header", "nav" etc). We can then apply CSS to those elements to determine how they are presented to the user.

Because advanced layouts take time to create, a quicker option is to use a template. Web templates are basically a pre-built website that enables you to customize as required. To see what I mean, check out these HTML templates.

HTML - Entities

Admin

A brief introduction to the concept of HTML entities.

HTML entities (also known as character entity references) enable you to add a wide range of characters to an HTML document. Characters ranging from icons, mathematical operators, geometric shapes, arrows, multilingual scripts, and much more, can be displayed in a web page by adding a small line of text.

For example, you can add a copyright symbol to a web page by typing ©. You could also use its Unicode hexadecimal value (©) or decimal value (©) if you prefer.

Another important example is the less-than and greater-than signs (i.e. < and >. These signs have special meaning in HTML documents. When the browser sees them it thinks it's an HTML tag and tries to interpret it as such.

If one day you actually wanted to display a greater-than sign on your webpage, you would need to use the HTML entity (or one of the numeric values). So, you could type > and it will be displayed to your users instead of being interpreted by the browser.

Entity Examples

Below are some examples of some popular HTML entities.

Character	Entity	Hexadecimal	Decimal	Name
©	`© &COPY;`	`©`	`©`	COPYRIGHT SIGN View in Editor
®	`® &circledR; &REG;`	`®`	`®`	REGISTERED SIGN View in Editor
™	`™ &TRADE;`	`™`	`™`	TRADE MARK SIGN View in Editor
>	`> &GT;`	`>`	`>`	GREATER-THAN SIGN View in Editor
<	`< &LT;`	`<`	`<`	LESS-THAN SIGN View in Editor
;	`&semi;`	`;`	`;`	SEMICOLON View in Editor
&	`& &AMP;`	`&`	`&`	AMPERSAND View in Editor
"	`" &QUOT;`	`"`	`"`	QUOTATION MARK View in Editor
#	`&num;`	`#`	`#`	NUMBER SIGN View in Editor
★	`&starf; &bigstar;`	`★`	`★`	BLACK STAR View in Editor
☆	`&star;`	`☆`	`☆`	WHITE STAR View in Editor
✂		`✂`	`✂`	BLACK SCISSORS View in Editor
✓	`&check; &checkmark;`	`✓`	`✓`	CHECK MARK View in Editor
✗	`&cross;`	`✗`	`✗`	BALLOT X View in Editor
✩		`✩`	`✩`	STRESS OUTLINED WHITE STAR View in Editor
✪		`✪`	`✪`	CIRCLED WHITE STAR View in Editor
❞		`❞`	`❞`	HEAVY DOUBLE COMMA QUOTATION MARK ORNAMENT View in Editor
❤		`❤`	`❤`	HEAVY BLACK HEART View in Editor
←	`← &leftarrow; &LeftArrow; &slarr; &ShortLeftArrow;`	`←`	`←`	LEFTWARDS ARROW View in Editor
↑	`↑ &uparrow; &UpArrow; &ShortUpArrow;`	`↑`	`↑`	UPWARDS ARROW View in Editor
→	`→ &rightarrow; &RightArrow; &srarr; &ShortRightArrow;`	`→`	`→`	RIGHTWARDS ARROW View in Editor
↓	`↓ &downarrow; &DownArrow; &ShortDownArrow;`	`↓`	`↓`	DOWNWARDS ARROW View in Editor
€	`€`	`€`	`€`	EURO SIGN View in Editor
▶		`▶`	`▶`	BLACK RIGHT-POINTING TRIANGLE View in Editor
▽	`&xdtri; &bigtriangledown;`	`▽`	`▽`	WHITE DOWN-POINTING TRIANGLE View in Editor
◉		`◉`	`◉`	FISHEYE View in Editor
∑	`∑ &Sum;`	`∑`	`∑`	N-ARY SUMMATION View in Editor
ℹ		`ℹ`	`ℹ`	INFORMATION SOURCE View in Editor
№	`&numero;`	`№`	`№`	NUMERO SIGN View in Editor
℗	`&copysr;`	`℗`	`℗`	SOUND RECORDING COPYRIGHT View in Editor
℃		`℃`	`℃`	DEGREE CELSIUS View in Editor
℉		`℉`	`℉`	DEGREE FAHRENHEIT View in Editor

For a longer list of HTML entities, see this extensive list of Unicode characters.

How to Reference an Entity

You can reference an entity either by its name, or by a numeric character reference.

Each method begins with an ampersand (&) and ends with a semicolon (;), but the part in the middle is different.

Entity Names

Entity names use letters to specify which entity to use.

However, not all Unicode characters have a corresponding entity name (as you can see in the above list). However, all Unicode characters are assigned a hexadecimal number which is unique to that character. So if you don't see an entity name for a character, use the hexadecimal or decimal value instead.

Numeric Character References

You can also use numeric character references to write character entities (as seen by the examples above).

Numeric character references include a hash (#) after the ampersand, followed by some numbers, and ending with a semicolon (;).

Numeric character references can be defined with either a decimal or hexadecimal value. The numeric character reference for the copyright symbol is © (decimal) and © (hexadecimal).