Basics of HTML

Welcome to the Freeola Internet Customer Support Pages. This guide is designed to provide general information about HTML coding. For more internet help topics please visit our main Support Page.

HTML stands for Hypertext Mark-up Language. Now to most people this will not really mean a great deal, simply put, HTML is everything behind web sites that you see when you browse the Internet. HTML is used to tell your web browser how to display your web site; the code is rendered by your browser creating an interface for viewers. When your browser hits a web page, it converts all of this HTML code into viewable objects, such as blocks of colour and borders.

HTML code is stored in files, just like your word document apart from instead of using .doc for the file extension, its .html instead. Saving your files as .html will instruct your browser (Microsoft Edge, Firefox, etc.) to render the code which is found within the file, renaming a document (.doc) to .html will not work, as documents are not written in HTML code.

Once you have saved the files as .html you will be able to open them using your browser, once you are happy with your pages you can then upload them to your web site by FTP. You can find several guides for uploading your files in our Support Section.

This guide/tutorial will take you through some of the most basic HTML code, so with a bit of luck you will be able to create your own web site quickly and easily.

• Introduction to HTML

• Requirements

• The Appearance of Text

• Images and Links

• Tables

• Meta Tags

Still not really sure what HTML code is? Well, nearly every web site on the Internet uses HTML code to generate their web site - including this one. To see the HTML code for this web site, or for any web site for that matter, you should be able to do so by just right clicking, and selecting the option called 'View Source' (or something very similar).

Now, you may be even more confused, however nobody expects you to know HTML code straight away, so there probably isn't a point in you trying to read the HTML code right now. All you need to know for the time being is that its this code that has been written/generated/designed to put this web site in place.

This article has been designed to try and teach you the basics of HTML, enough so that you may be able to troubleshoot code for your own web site and even possibly create your own basic site.

• A text editing software. At Freeola we recommend using Notepad++. This software can be downloaded for free from the developer site. Please be advised that as Freeola is not officially associated or affiliated with this software we are unable to provide any support with technical errors you may encounter when using it.

• An up to date web browser. The reason that we say up to date, is because web browsers may display things slightly differently. Being up to date generally means you are seeing the most accurate representation of your site. We would suggest testing your web site in Microsoft Edge, Firefox and Safari at least.

To write your own web site, or troubleshoot a web site that you already have, you will need to have the web files saved on your computer, for convenience a new folder on your Desktop would be ideal.

HTML code consists of small pieces of code called elements, an HTML object will have an opening tag and a closing tag. A tag will be contained within a set of triangular brackets, and will usually be a word or two.

All code including tags are written directly into the text editing software that you are using.

As an example we will explore the bold tag. You may be aware of making your text bold in most desktop publishing software, this is achieved in HTML by using the bold tag, which looks like this:

Opening Tag: <strong>

Closing Tag: </strong>

So if I wanted to make the word 'Freeola' bold, I would type the following into my text editing software:

<strong>Freeola</strong>

Once we have done so, the file needs to be saved as .html as its extension.

The following table contains some examples of way that you can modify the appearance of text:

Opening Tag	Closing Tag	Use	Example
<strong>	</strong>	Used to strongly emphasise, gives bold text.	Example Bold
<u>	</u>	Makes text underlined.	Example Underlined
<em>	</em>	Used to emphasise, makes text italic.	Example Italic
<p>	</p>	Contains text within a paragraph	Example of paragraph. This is the second paragraph
<h*> * can be replaced with numbers between 1-6	</h*>	Creates a Header	Header Header 2 Header 4 Header 6

The tags that are mentioned below will look fairly different and a tiny bit more complicated than before. The difference between these are 'attributes'. 'Attributes' sit inside of the tags (the '<', '>'s) and give the browser a bit more information about the object you are trying to display.

For example, in your code if you were to try an add an image, you would use the <img> tag but, with no description of what image you are trying to load, how will the browser work it out? I'd suggest you read below.

Adding Images to your Web Site

Below is an example of how the HTML code will look, if an image has been placed on the page.

<img src="pictures/holiday.jpg" alt="Sunny Beach"/>

The 'src' attribute, which is currently 'pictures/holiday.jpg', can be changed to whatever location that your image is in relation to the current web page. For example, if your image file is called 'apple.jpg' and is in the same folder as your html file, your code may look like this:

<img src="apple.jpg" alt="Fruit and Apple"/>

The 'alt' value stated in the code is not necessary, but will be displayed as text if, for whatever reason, the image is not available - an example is that you deleted the file by accident. It has also become apparent that when some search engines crawl your image files, they will pay attention to the alt text, so its always handy to have a small description in there.

As the main purpose of an 'img' tag is to display an image, there is no need for any content text, therefore there is no opening and closing tag, all of your code sits within one big tag. You will find that this is the case for many different elements.

Website Navigation

One of the most commonly used and most important feature for web sites is the ability to create links. Links are generally found on web sites in the form of text or images and allow the user to flick between your web pages. These are commonly called buttons.

You can find the code for creating an example link below:

<a href="myholiday.html">Visit My Holiday Page!</a>

The 'href' attribute above is the location of where you want your link to take the user. For this example, I am re-directing the user to the web page called 'myholiday.html'. This file would be in the same folder as the current web page. If I was trying to link to a file that was in another folder, my code may look like this:

<a href="adventures/myholiday.html">Visit My Holiday Page!</a>

Alternatively, you may be trying to link to a completely separate web page such as Freeola's! To do this, you code would look like:

<a href="https://freeola.com">Freeola - The Free Internet Service Provider</a>

By using 'https://' before your link, your browser will know that you are going to state the whole address for the link to go to.

How will my link appear on the web site?

The way your link will appear on your web site, is set by the content (the text between the tags) of the tag you have placed. For example:

<a href="https://freeola.com/support/">Freeola Support</a>

Would appear on your web site as 'Freeola Support'.

Instead of text, you may wish to make your link an image. If at this point you aren't sure how you would place an image on your site, I'd suggest you read above.

To do this, you will need to place your image code in the content of your link code, for example your code may look like this:

<a href="/adventures/myholiday.html"><img src="pictures/holiday.jpg" alt="My Holiday In Spain"/></a>

As you can see above, instead of entering in standard text as the Content, we simply place an image.

Tables are commonly used in web site design as they are very flexible, and allow you to easily distribute information across the page. Although the use of tables in designing sites is frowned upon by some web professionals, some information is best suited for a tabled view.

The opening tag for the a table is <table>. Once you have opened your table you need to create your columns and rows.

To create a row, you need to use the 'tr' tag, which looks like this: <tr>

To create a new column, you need to use the 'td' tag, which looks like this: <td>

Below is an example of how your table may look. This example is a table which has 4 cells.

<table>
           <tr>
                  <td>
                          <p>Cell 1</p>
                  </td>
                  <td>
                          <p>Cell 2</p>
                  </td>
           </tr>
           <tr>
                  <td>
                          <p>Cell 3</p>
                  </td>
                  <td>
                          <p>Cell 4</p>
                  </td>
           </tr>
 </table>

When you've saved this and viewed it in a web browser, you should see the following:

Cell 1	Cell 2
Cell 3	Cell 4

Its likely that your table will need to be a bit bigger than this to contain all of your information. To do this, you simply need to add in more Table Columns and Rows where you see fit. You can also modify the table, by changing the attributes under the 'table' tag.

The 'meta' element is used to send and store non visible information about your web page. Although commonly thought, meta information is not commonly used by search engines to improve your search rankings. Search engines may, however, use this information to display within their searches.

All Meta information needs to be placed between the '<head>' tags, so that it is not viewable visually on your web page.

There are several different functions of a meta tag, the type of meta tag you are using needs to be defined user the 'name' attribute. The values that you want the meta tag to hold will be entered in the 'content' attribute. The below example shows you how to have Meta Keywords.

<meta name = "keywords" content = "Freeola, Help & Support, Broadband, Web Hosting">

Below you can find some of the common uses of meta tags.

Name Value	Content Values	Description
Keywords	A list of words that are relative to the topic of your web site, these need to be separated by a single comma.	These words are commonly used by indexing services to easily determine what phrases are relevant to your site.
Description	A short description of the content of your web site, it is suggested that you keep this less than 150 words.	Also generally used by indexing services as a description of your site. Some search engines display this under your web site's title on their results page.
Content-Type	An example: 'text/html;charset=iso-8859-1'	Tells the browser of the page what type of content is being loaded.
Geography	An example: 'London, United Kingdom'	Describes the the physical location of the web site topic. For example, we will say our web site is describing a company, which this tag we could state it is located in London.