Monday, 4 August 2014


Introduction to HTML
HTML Tutorial 1
Introduction to HTML

HTML Tutorial 1

Welcome to these beginner HTML Tutorials! These lessons build on each other, but if you want to skip to a particular subject use the menu system above. But be aware that the tutorials assume you have learned everything from the previous lessons.


To understand what HTML is.

What W3C is and why standards are important

Get the (free) tools of the trade

Basic Concepts of HTML

What does HTML mean?

HTML stands for Hyper-text Mark-up Language:

Hyper-text: text fit for the Internet

Mark-up: it is not programming - it simply marks up (or labels) various parts of the document in different ways depending on how you want it to appear or behave.

Language: although it is not programming, it has its own way of 'speaking' so that it can be understood world-wide.

Basic HTML underpins how all web pages appear. There may be fancy programming, databases, forums and pictures, but those are made to appear by generating HTML.

So through these lessons you will be learning how to put together your own pages that you can put on the Internet.

HTML Works through <tags>

Web pages are coded using text-only format documents. This means all you need a simple text editor (such as Notepad in Windows or TextEdit in MacOS X) and you are good to start. NB: If you're using TextEdit make sure you set the file to Plain Text by going to the Format menu and selecting "Make Plain Text"

The web page itself and the elements inside that document are marked-up using tags. These are words and terms inside greater-than and less-than signs, like the code below.



The first tag is an 'opening tag' and the second is a 'closing tag', which is marked by the forward slash. In this example, it means that everything between the tags is marked as HTML and this will be important for you to remember as you learn more tags.

Some tags do not need closing tags, but we will learn these as we go along.

W3C Standards - are they important?

W3C is the "World Wide Web Consortium" and they set coding standards for websites. If you want to learn more about them visit their website.

Coding Standards are important. This is because people who use the Internet are from most countries of the world, using different computers and different software to view websites. Having standards gives a certain level of consistency in how pages are viewed regardless of browser or computer.

There are limitations to this and sometimes it is necessary to make changes to suit different browsers, but these tutorials teach standards-compliant HTML. We will see later on how we check if sites are standards compliant.

Get the Free Tools of the Trade

Doing simple, standard coding on new webpages does not require any money to be spent - so anyone can learn. Especially if they use free tutorials from a site like this one. So here's what you need.

Text Editor: As I said above you can use Notepad in Windows or TextEdit in MacOS X (ensure you go to Format -> Make Plain Text before you start). Alternatively, there are various free text editors that highlight your code for you, which can help. We recommend Komodo Edit (available for Windows and Mac) but try a few out and see what you're comfortable with.

Standards Compliant Browser: most web browsers (the programs you use to look at web pages are called 'browsers') are now compliant with coding standards. But these are three which are particularly good:

1. Mozilla Firefox - if you use this browser, our tip would be to download the 'Developer Toolbar' add-on, which helps to highlight problems and show when you are coding in a standards-compliant way.

2. Safari

3. Internet Explorer 8 - please ensure you have upgraded your installation of IE to version 8 using the automatic updates feature in Windows.

No comments:

Post a Comment