Resplendent Reverie

HTML 5 Basics Tutorial

You are currently viewing a tutorial from the Tutorials page. To select other areas of interest, click the back button on your browser, or click here.

Author: Alex Livanos
Written: January 15, 2013
Format: HTML 5

So you've always wanted to get started on building your own web site, but never knew how to go about it? Well here's where you can properly get started on your coding. It'll feature all the basics, and a step-by-step instructional view-point on what needs to get done in what order.

What Does HTML Stand for?

HTML stands for HyperText Markup Language.

Step 1: Choose a Coding Program

The very first thing we need to decide is what coding program we'll use to write, edit, and otherwise update our fancy coding in. If you're a novice, this usually means starting out with a simple text editor like Microsoft Windows Notepad. Once you become more and more familiarized with coding and you incorporate a larger web site with various styles and abilities, you'll eventually feel comfortable for programs like Komodo Edit, Notepad++, and Dreamweaver.

Step 2: Begin the Basics

We first need to declare a DOCTYPE. This coding will essentially let browsers comprehend what kind of coding style you're writing in. There's many kinds of styles, or "versions" of coding that has been brought to us over the years. However, it's important to always familiarize ourselves with not only the basics, but the most recent and up-to-date format. This will enable a more diverse and creative outlet for our future and its possibilities.

Since we're going to cover the basics of HTML with the higher standard of HTML 5 as a newer version, let's set the DOCTYPE as follows. There is only one DOCTYPE in HTML 5, and with it brings much simplicity.

 

<!DOCTYPE html>

Step 3: Minimum Requirements

In HTML 5, the minimum requirements for a document must include these tags in order for it to be properly considered HTML 5. I'll explain each as they're viewed in order, what they do, etc.

 

<!DOCTYPE html>
<html>
<head>
<title>WEB SITE TITLE HERE</title>
</head>

<body>
WEB SITE CONTENT HERE
</body>

</html>

 

As explained previously, our very first line consists of our DOCTYPE. This allows the browser you're viewing the web site in to automatically comprehend which version or style of Markup you've coded in.

The <html> tags are the declaring elements that allow your browser to understand all the content within those tags are written in HTML, and not say, a regular .txt (text) file. (Which it can also do.)

The <header> tags are basically the "heading" of your file. Think of these almost as all the important information you put on top of your essays and papers in school. They're what the teacher or professor needs in order to comprehend who you are, what class/period you're in, etc. (Like a browser would do.)
Other than your actual web site's title, Cascading Stylesheets (CSS), or other minuscule declarations, anything inside a <header> tag is usually not noticeable by the naked eye through your browser.

The <title> tags are exactly where you place the title of your site. It will appear in your browser's tabs, on your computer's taskbar (from the browser's window), or anywhere else your browser is rendering your site. Often more than not, many web sites place little snippets of info or symbols into their <title> tags. However, it's important to understand that this is technically for a site's name, and should not contain anything long, complex, or otherwise non-related.

An easy one for you to remember are the <body> tags! This is pretty simple and not worth much explaining. This is where you'd put all of your content, dividing layers, tables, or other coding necessities. Just about everything and anything can go inside here. What's important in the end is how you utilize your coding to the best of your abilities. Certain commands and shortcuts can make things a LOT easier without having to cram in a plethora of tags, scripts and coding itself. But we'll cover that in a different tutorial...

Top?...

Step 4: Coding Cleanly

While this is more of an option as opposed to a requirement, it's very useful if you take the time to code cleanly. Not only will you become more efficient in finding a particular area of codes, but it'll keep you from making a significant amount of mistakes. Taking the time to code neatly also makes you look great in front of other web designers. It'll have a longer-lasting impression of your skills overall, and will keep you from going insane down the road.

Here's a good example of clean coding by using tabs for different columns in your editor. I'll use part of my layout's code as an example.

 

<table class="tessera">
	<tr>
		<td colspan="4"><strong>Year 2012:</strong></td>
	</tr>
	<tr>
		<td class="tesseris"><a href="/archives/2012/12.txt" target="_blank">December</a></td>

		<td class="tesseris"><a href="/archives/2012/11.txt" target="_blank">November</a></td>

		<td class="tesseris"><a href="/archives/2012/10.txt" target="_blank">October</a></td>

		<td class="tesseris"><a href="/archives/2012/09.txt" target="_blank">September</a></td>
	</tr>
</table>

 

Below would be an example of what NOT to do.

 

<table width="400" border="0" cellpadding="5" cellspacing="0">
<tr>
<td colspan="4"><strong>Year 2012:</strong></td>
</tr>
<tr>
<td width="100" align="center" bgcolor="f0f0f0"><a href="/archives/2012/12.txt" target="_blank">December</a></td>
<td width="100" align="center" bgcolor="f0f0f0"><a href="/archives/2012/11.txt" target="_blank">November</a></td>
<td width="100" align="center" bgcolor="f0f0f0"><a href="/archives/2012/10.txt" target="_blank">October</a></td>
<td width="100" align="center" bgcolor="f0f0f0"><a href="/archives/2012/09.txt" target="_blank">September</a></td>
</tr>
</table>

 

What's wrong with this first and foremost is that it's pretty difficult to read. Your coding is supposed to be pretty easy to follow along with your eyes without having to follow with your finger on the monitor or use your mouse to highlight. Allowing yourself to use tabs when you code gives you an advantage of what tag starts and ends where, since you can easily follow them vertically as opposed to horizontally.

What's worse is that this coding is giving the table and each of its table data a code for its look. In HTML 5, this would be in error. We need to specify a Class element so that we can assign them like we did in the previous example. Not only do you have to enter it once in your CSS as opposed to four times here inside the page itself, but doesn't it look a lot cleaner and easier to read?

Top?...

Step 5: Header Tags & Functions

There are some tags that can be very useful to add inside your <header>. Some of these can help render your web site as a whole, or otherwise allow you to make modifications to browser-specific basics. They can also allow you to pull certain commands and documents from another source, such as with Cascading Stylesheets (CSS) and JavaScript. Let's go over some of the basics and what they can do for you.

The <meta> tags allow for various tweaks and deciphering for your browser. It can vary from understanding what Charset your document will be rendered in, to the author and generator commands used to identify copyright and credits to whom developed your site, to even a description and keywords used to display and search on Google. Once again, these codes act more as an "invisible to the naked eye" theme, only viewable from your coding source, or entries found in search engines like Google.

Here's an example of the basics, and what I've used for between my <header> tags.

 

<head>
<title>Resplendent Reverie</title>

<meta charset="utf-8">

<meta name="author" content="Alex Livanos">
<meta name="generator" content="Jasc Paint Shop Pro 9">

<meta name="description" content="Primarily a blog, this site will express all of my personal views and 
	opinions about general life, and discuss my many interests that keep me going through times of joy 
	and sorrow. Let's dream together!">

<meta name="keywords" content="blog, anime, manga, games, creative arts, quotes, Cowboy Bebop,... 
	(etc. [anything about your site would go here])">

<link rel="stylesheet" href="/css/v0.css" type="text/css">

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<script src="/java/v0.js"></script>
</head>

 

The <meta charset="value here"> allows you to select a charset specific to your coding needs and character depictions. Since there are many languages around the world and not just English, this enables countries to select a certain charset that may be easier to code inside their country. However, unless you're somewhere in Asia or are writing in various Asian languages, it's typically easier to write in a universal standard, which is a good example of UTF-8.
In HTML, it is important to always remember typing in lowercase letters, as some commands are case-sensitive. This also happens to be the case with all XHTML Strict, but that's another matter.

Other <meta> tags are useful when you want to incorporate the person or programs responsible for the site, and a description and keywords—which can both be used to appear on search engines like Google to give your site an extra push to grab people in.

The <link rel="value here"> tags represent a reference to pull from another document or source. They can be used for pulling a separate CSS or JavaScript document, or even a unique favicon representing your site.

Top?...

Step 6: Basic Tags

Below are some of the most basic tags you'll be using to create your site. Over time you'll be able to memorize these tags without any problem. Be sure to always include the closing tags to keep your coding valid and proper! There are also many commands you can include with these tags, with many different values. Be sure to study them so that you can incorporate whatever you want into your site. Remember that presentation is also half the battle! ;)

Top?...

Step 7: Deprecated Tags

Whether a beginner and learning HTML 5 as your first markup language, or returning from previous HTML versions, it is imperative to understand which tags have been removed. Using these tags while trying to render an HTML 5 DOCTYPE can bring you much displeasure as a web designer. Most will be undeciperable, corrupt, or otherwise break your layout's design.

For more information about new and deprecated tags in HTML 5, click here.

Top?...

Step 8: Save Your Files

The final thing for us to go over now is how to save and upload your documents onto your site! You'll want to remember a few key things when saving data, so let's go over that first.

  1. Save all HTML files as either .html, or .htm for special commands and designs

  2. Save PHP documents as .php

  3. Save CSS documents as .css

  4. Save JavaScript documents as .js

  5. Save Favicon images as either .ico or .gif

How to save your documents.

Remember that your home page of your site needs to be saved exactly as "index.html" or "index.php", as "index" is what refers to a web site's root directory (or root of a folder).

Top?...

Step 9: Upload Your Files

After you've done that, it's time to upload your content! Using a FTP (File Transfer Protocol) client, you can access your site with your various info and upload your content by whatever ways your FTP initiates. I personally use FileZilla, which is a free FTP client that's quite popular. Others, however, can be included in your domain purchase (Such as DreamHost's personal FTP), or payed software like CuteFTP Pro.

Upload your content via FTP client.

Congratulations!

You've successfully completed this tutorial and are well
on your way to becoming a great web designer! ;D

Top?...

Alliance & Affiliation:

Night of Discord Network Inuyasha - Heart and Soul Nekonette A Glimpse Into the Horizon Short & Sweet Studios Kissed by Fire Affelius TorchBunny Network