HTML Section One: Getting Started

Free Web Design Course

This Web Design course will teach you HTML, HTML 5, and Cascading Stylesheeyts (CSS). It is aimed at complete beginners to the subject, and assumes you have no knowledge of creating web pages. You won't need to buy any expensive software for this course. To see what you WILL need, simply click the Course Software link below. The course has been designed to work on just about any operating system.

Section One: Getting Started

Introduction to the Web Design Course

Hello, and a very warm welcome. The software you need is set out below. We assume that you have absolutely no knowledge of designing web pages. Throughout the course of this book you will learn the fundamentals of Web Design. And, of course, you will start creating your own pages. By the end of the book, you will have acquired a good understanding of what web design is all about, and have the ability to take it further, if you so wish.

What you will learn

The aim of this course is to get you started designing web pages. It is assumed that you have little or no experience of the subject. During our time together, you'll learn some new concepts and ideas, most of which will not be difficult. After all, there are billions of pages on the internet, designed by the whole spectrum of humanity: children, adults, pensioners, people from all walks of life have sites out there. And if they can do it, so can you. In fact, follow the lessons carefully and you WILL do it. Before long, you'll have your own pages designed and ready to be uploaded, there for all the world to see.
The technologies you will learn are HTML, HTML5, and Cascading Style Sheets. (HTML5 is the newest version of the of the language.)
At the heart of every web page is something called HTML. You will learn what this is, and how to code it. You will also learn the newest version of HTML, which is called HTML5. Both versions are included in this course. As well as HTML, you will learn about Cascading Style Sheets, and will be able to improve the look of your web pages by adding CSS to enhance them.

At the end of most chapters in this book you will see a summary table of what you have learnt. The summary tables are also included in a separate document, called quick_reference.pdf. This is one of the files that come with this book. All the files you should have are detailed below.

What you need to do the course

The only thing you really need to do the course is a simple text editor. We explain all about this in the first chapter, Anatomy of a Web Page, in the section Software for Writing Web Pages. But the operating system you have is not important. So you can do this course on a PC or an Apple Mac.

Web Design Course Files

There are a number of files that you will need in order to complete certain sections. Whenever you need a file for a section of your course, it will be explained in the relevant section. The download location is here, under the heading Web Design - New Course (you don't need the downloads for the old course.):

Download the Extra Files needed forthis course

Once you have all the necessary files, you can begin. The first part is all about the software you need for this course. Don't worry - you'll already have all you need, so there's nothing to buy. Click the link below for the first section.

Good luck!

Software for Writing Web Pages

To start writing web pages, we'll use a simple text editor. That way, you'll be able to focus on the code, without getting distracted by the menus and buttons of a complex piece of Web Design software.

If you use Windows, then Notepad is an excellent text editor to use. To launch it, click on your Start menu in the bottom left of your screen. Click on All Programs, then Accessories. From the Accessories folder, select Notepad:

The software should look like this, when it launches:

Another good piece of software is the free Notepad++. You can get a copy here:

Notepad Plus

Mac and Linux users have a number of text editors available, but finding a free one that is as good as Notepad++ is quite difficult. Bluefish is OK, but looks a bit dated, especially for HTML. You can check it out here:

Bluefish

The free Smultron is worth downloading, if you have a Mac. You can grab a copy here:

Smultron

For a basic text editor like Notepad, Macs come with TextEdit, which you can find in your Applications folder. You might want to play around with the Preferences, though, or you'll end up with Rich Text rather than Plain Text.
Another good free editor for the Mac is TextWrangler. You can get a copy here:

Text Wrangler

What is a web page?

In this section, you're going to learn just what a web page is and how it can be read by a browser like Internet Explorer or Firefox. You'll also construct your very first web page. Let's make a start.
Files on your computer come with extensions. If you wrote a letter using Microsoft Word and saved it with the name 'MyLetter', the software would add four letters to the file name (three in older versions). Because it was typed using Word, the four letters that get added to your filename are.docx. So your file name will be 'MyLetter.docx' and not just 'MyLetter'. If you created a spreadsheet in Microsoft Excel and called it 'Accounts' the Excel software will add its own four letter extension to your file name. It will add .xlsx. So you file name will be 'Accounts.xlsx' and not just 'Accounts'. So you get a different four letter extension depending on the software you used.
These extensions are very important to computers. They are used to identify the type of file it is. With a file extension, Word can recognise its own documents. It sees the letters docx and says 'Ah yes, that's one of mine. I can open it.' If it sees a different extension, xlsx for example, it says 'What the heck is that?' You may then get an error message telling you that the file type is not recognised.
Web pages have their own file extensions. Oddly there are two different extensions, a three letter file extension and a four letter extension. Web pages come with the extension .htm or .html. A browser can recognise either extension.
When you open up a web page with your browser, Internet Explorer for example, the browser software checks the file extension, the same check that Word and Excel make. If it sees the .htmor .html extension it knows it's a web page and then tries to open it. (Modern browsers, though, can open up other types of files. Internet Explorer can open up your Word documents and PDF files.)
Behind the scenes, however, the thing that Internet Explorer is trying to open is really a text file that has had its extension changed from .txt to .htm. The text file though will have special symbols and words, called Tags. When the browser sees these Tags it goes to work, displaying whatever you typed and hiding the Tags from your viewers.
Most web pages on the internet are written in code called HTML. HTML stands for HyperText Markup Language, and is fairly easy to get the hang of. That's because HTML is not a programming language: it is a language designed to improve the presentation of text. For example, in Microsoft Word, if you want a nice big heading, you can select a font size from a menu. HTML has an easy way to change the size of text of headings, too, which you'll see in a moment. But that's basically all you are doing with HTML ' presenting text and images on a page. The way you do this is with things called TAGS.

What is HTML 5?

HTML comes in different versions. When people talk about HTML 5 they are talking about the updates to the mark up language. These updates were agreed (mostly) by a whole host of different parties, all members of an organisation called W3C. W3C was founded in 1994 by Tim Berners-Lee, who also created the first version of HTML and invented the World Wide Web. They now oversee the defining of new Web technologies. Comapnies who make browser like Microsoft (Internet Explorer), Mozilla (FireFox), and Apple (Safari) can then decide which of the new Web technoligies they wish to implement.
Most of the big names in browser technology decided to implement quite a lot of the new suggested updates (specifications) put forward by the W3C. These specifications are commonly known as HTML 5. In practice, this means implementing features like HTML Video and audio directly into the browser, as opposed to needing a 3rd party plugin like Adobe's Flash. Another exciting update is something called the Canvas tag. This allows you to create quite sophisticated animations and graphics using Javascipt, again without needing a 3rd-party plugin.
There are a whole lot of new HTML tags that take browser technology forward into the 21st century. Throughout this course, we'll introduce you to the essential HTML 5 tags that you need in order to create a modern web page.

HTML Tags

HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and one at the bottom:

<HTML>

</HTML>

This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language.
Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML.
All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page.
So add those two tags to your text editor and it will look like this:

The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and, again, your web page can really be messed up.
The next pair of tags are the HEAD tags: They go between the two HTML ones:

<HTML>

<HEAD>

</HEAD>

</HTML>

Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>.
The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words 'Hello World' on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because 'Hello World' is direct text, and not a special instruction that the browser can understand.
A special instruction your browser can understand is the TITLE tag:

<TITLE> </TITLE>

The Title tag always goes in the HEAD section of the HTML skeleton.

The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your browser window. And that's it, that's all it does. (You'll see what it looks like in a moment.)
The final, and most important part, of the HTML skeleton is the BODY section.

In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags.
In your text editor, then, add the following:

Notice that we've added some text between the two TITLE tags: My First Page. We've also used indenting, but this is only for readability: the indenting doesn't have any effect on the results.

DOCTYPE

One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about which version of HTML is allowed. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In HTML 5, however, it's just this:

<!DOCTYPE HTML>

DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE. Note the exclamation mark after the first angle bracket, and the space between DOCTYPE and HTML.
So add a DOCTYPE to the top of your page. Your text editor will look something like this:

Saving Web Pages

To save your code as a web page, click the File menu at the top of Notepad (or whatever Text Editor you are using.) From the File menu, select Save As. The Save As dialogue box appears (We created a new folder to store all our web pages in, and called the folder HTML)..

Note the default extension at the bottom, under 'Save as type' It says, Text Documents (*.txt). If you leave it on that then you won't have web page, you'll have a text file. Click on the drop down list and change it to 'All files'. (You don't need to do this if you're using TextEdit on a Mac. Just typefirstwebpage.html in the Save As box.)

In the File Name box, type firstwebpage.html

Note that we've used all lowercase letters. This is not strictly necessary, but is recommended. Also, try not to add spaces to web page names as this can cause problems. You can use underscores or hyphens, though. So these two are OK:

first_web_page.html

first-web-page.html

But these two should be avoided:

first web page.html

FirstWebPage.html

Click on Save and you'll have a HTML page that can be displayed in a browser.

Viewing your web pages in a browser

To view the results, open up an explorer window. In Windows, this is done by holding down the Windows keys and then pressing the letter E on your keyboard. Or click your Start menu in the bottom left, and then click on Computer. On a Mac, click the Finder icon in the Dock.
Navigate to where you saved your HTML page. In our case, this was a folder we created called HTML, which is on our network:

In the image above we have a file called firstwebpage.html. If yours has .txt on the end instead of.html then try again because it's not a web page but a text document.

Double click your HTML file and it will launch in your default browser. For us, this is Firefox. Yours might be Internet Explorer or Safari. You should see a blank white page with your TITLE at the top. Here's the Firefox version:

And here's the same page in Internet Explorer:

Notice that in both versions the TITLE we added is at the very top of the screen ' 'My First Page'. The same TITLE can be seen further down, at the top of each browser tab.


Exercise
Change the TITLE tag to something other than 'My First Page'. Click File > Save in your text editor. Switch back to your browser and press F5 to refresh the page. Your new TITLE should appear at the top of the screen and at the top of the browser tab.