HTML Tutorial: Basics

So, what is HTML? HTML stands for ‘hypertext markup language’, and is simply a language used for creating websites.

All commands for HTML are typed within ‘less than’ and ‘greater than’ signs: < >

These are called tags, and usually come in pairs. To begin a command, you would type:

<command>

And to end a command, you would type:

</command>

.. with the backslash after the first <.

Within commands (or elements), we can have attributes and values. Attributes provide more information on the element.

<command attribute="value">

Double or single quotes can be used for the value. Where double quotes are included in the value, the quotes around it must be single quotes.

attribute='he said "hello" to me'
attribute="he referred to me as a 'yawn' yesterday"

HTML tags are recommended to be written in lowercase. While they are not case sensitive, XHTML (extensible hypertext markup language) demands that tags be in lowercase. This means that should you convert, it will make things a lot easier.

Now we shall begin learning about how to use HTML in your first webpage.

Setting up

So that your website can be viewed by people surfing the internet, it will need to be uploaded on there somehow. You will need to find a web host that will allow you to do this. When starting off it is best to sign up with a freeserver, and I recommend freewebs.com.

While signing up for your account it will ask you to choose a template. Do not choose one because using a template would mean absolutely no use of HTML. Use ‘advanced HTML mode’ instead.

Next you will need somewhere to edit your HTML pages. I recommend using Notepad. Do not use Microsoft Word or WordPad. Open up a Notepad document and save the blank txt as “index.htm” (include the quotation marks). Select to save as type ‘All files’, and Save. .htm is the common file extension for HTML files. You can also have html but there is not much difference
in the way they function.

Most of the time index will be the name of the homepage of the site, so if you were to have a site freewebs.com/yoursitename, what would come up when typing in that address would be the page you saved and made as index.htm.

Structuring an HTML Document

It is important that you begin an HTML document with a doctype, or a ‘document type declaration’, which tells the browser viewing the page what version of HTML the page is coded in. There are several different doctypes, but we will be sticking with HTML 4. Copy and paste the following code at the beginning of your HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The next thing you should paste into your document is this:

<html>

<head>

</head>

  <body>

  </body>

</html>

The HTML command defines the purpose of the document as an HTML document. Remember, all commands should have an end to them; that is why the document ends with an end HTML command.

The ‘head’ section is where you put any introductory information to the document, such as the title, and often Meta Tags, which will help search engines categorise your site. Whatever is placed in this section will not physically appear on the web page itself.

A ‘title’ will appear in the title bar of the window (for example, on Google it says ‘Google). Include what you want to appear in the title bar on your website using this:

<title> Your title here! </title>

The ‘body’ section is where ALL your content will go. Everything that you wish to appear on your webpage.

Basic text

Yay, now for the fun part. Text is simple to type in HTML, all you need to do is type in what you want to appear on your webpage. Tags are only needed when you want to do something special. Below are some tags used for common commands.

<strong> this makes text bold </strong>
<em> this makes text italic </em>
<u> this makes text underlined </u>
<del> this makes text strike through </del>

You might have come across other tags like <b> for bold and <i> for italics, but these should not be used. Better meaning can be given through “strong” for strong emphasis and “em” for emphasis. Particularly for screen readers for the blind, this gives more meaning to the word.

As you can see there are not many commands shown. There are more, but they aren’t as important and chances are you will not be using them often.

Of course, another important thing is paragraphs! You need to use paragraphs in whatever you may be writing. You don’t want your text to just go in a very unordered clump.

<p> Here is an example of a paragraph. You can go on to another paragraph when you want. </p>

<p> Here is your new paragraph! And you can keep going on and on. </p>

You might want to title those paragraphs, or sets of paragraphs, with headings. They can be different sizes, the biggest being heading 1. They go up to heading 6, being the smallest. The following code shows what to punch in for ‘heading 1′. You simply need to change the number one in both the start and finish tag, if you want to change the heading size.

<h1> Put Your Heading Here! </h1>

If you wish to have a line break, that is; go to the next line… then you will simply need to put

<br>

which will take you to the next line indeed!

Finishing off

Copy the following code into an HTML document, save it, upload it to your account (or open it in your browser from your computer), and it should look like this. Now switch around a few things and see how they change. You should understand most parts of the HTML below; which have been outlined in this section. (I’m not 18 years old anymore, by the way, but I was 18 when I first wrote this example, so let’s leave it that way.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>
 <title>My webpage  </title>
 </head>

  <body>

<h1>Welcome to my webpage!</h1>

 <p>Welcome to my webpage! My name is Georgina and I am 18 years old.</p>
 <p>Here are some of my favourite things: <br>
sushi<br>
rock music<br>
taking photos<br>
playing piano<br>
dancing</p>

  </body>

</html>

You should know by now how to do the following:

  • start an HTML document and structure it correctly
  • add text to a webpage
  • place a title in the title bar
  • make bold, italicise, underline and strike text
  • write in paragraphs
  • add different sized headings to your page

It may all seem quite boring, but with CSS you will be able to make all this text fancy. You may refer to my other tutorials for that.