Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
http://www.gerrykruyer.com
Teach Yourself HTML5 & CSS 3: Task 1 – Getting Started Part 1
In this introductory lesson you will learn how to do some introductory webpage coding using the latest version of
HTML named HTML5 and the latest version of CSS named CSS 3. As well you will cover a bit of internet history,
web history and terminology.
Internet History
The internet and the World Wide Web are not the same thing. The internet started in the 1960’s by the American
military as a way of ensuring that communication was possible even if nuclear bombs were detonated knocking out
infrastructure. They called it ARPAnet. Over the next 20 years universities around America and then later around
the globe started using it to connect their large mainframe computers so that academic papers could be easily
swapped.
During the 1980’s and 1990’s personal computers became more popular and the internet grew exponentially as more
and more people plugged into the global public network that we know today as the internet. It is all connected together
by optical fibre, telephone cables and wireless signals.
The internet is used not only to transfer webpages but also to transfer e-mail, to allow people to chat, to transfer files,
to use instant messaging, to use telnet to remotely connect to other computers, and to use Gopherspace (an early
version of linking between documents over the internet). The World Wide Web is the most popular of all of these
services run on the internet today.
HTML History
HTML is an abbreviation for HyperText Markup Language. It is the language of webpages - the markup language
that all web browsers such as Google Chrome, Internet Explorer and Apple Safari decode to render (draw) webpages
that are transferred to your computer or smart phone over the internet.
HTML has developed over several versions and web browsers have varying levels of support for these versions. In
general, the lower a browser’s version number is, the less that it is capable of correctly displaying the latest additions
to HTML code.
The first version of HTML was built by an English man named Tim Berners-Lee on a NeXT computer whilst he
was working at CERN (Conseil Européen pour la Recherche Nucléaire) and his first successful use of his
“WorldWideWeb” browser was on Christmas day 1990 when he was able to surf between a few linked pages that
he had created with each page on a different computer. It did not have a version number. In order to be able to surf
between his pages he invented what he called the URL (Universal Resource Locator) which you will know as the
web address of a webpage. He invented the rules that allowed computers to pass webpage information between each
other. One of the simplest of these is that no two web addresses can be the same.
Question 1/
Why can’t two website addresses be the same?
Rules to pass data between computers are called protocols and he named the protocol to pass web information
between computers as HTTP or HyperText Transfer Protocol. http is what you see at the start of any webpage
address. He also invented the first version of HTML which he designed to be simple to learn and use.
In 1995, the Internet Engineering Task Force (IETF) standardised HTML and this version was known as
HTML 2.0.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 1
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
In 1997, the World Wide Web Consortium (W3C) of which Tim Breners-Lee is still the director, finalised the next
version of HTML, HTML 3.2. It was followed by HTML 4.0 in 1998 and 4.01 in 1999. Then the W3C announced
that it would not be creating new versions of HTML, and would begin to focus on extensible HTML or XHTML
which was a more rigid webpage language based on XML (XML is a computer language that encodes text and data
so that it can be processed and exchanged across various types of hardware, operating systems, and applications).
At around the time that the W3C recommended using XHTML 1.0, its development split apart. The W3C focused
on improving XHTML and this was known as XHTML 2.0 but many web designers did not want to move to the
rigid structure of XHTML. As the result of this another group called the Web Hypertext Application Technology
Working Group (WHATWG) began working on an update to HTML 4.01.
In 2006, the two groups decided to cooperate and together create a new version of HTML that was not as strict as
XHTML. They named this version HTML5 (no space) with the goal of developing an HTML standard capable of
running full applications in a web browser. HTML5 is still in development today but many of the features proposed
are already available in the latest browsers.
HTML Basics
You don’t need to buy any special software to create webpages; all you need is a basic text editor which comes free
with most computers. If you are using a PC then you will find a basic text editor called Notepad in your Accessories
folder.
Do not use word processors such as Microsoft Word or WordPad to create webpages. Word processors
place invisible characters in their documents and these invisible characters will create invalid webpage code. Your
webpages will not be able to be displayed on a screen. Even a short sentence such as “Hello. How are you?” when
saved in Microsoft Word will look like the screen-dump shown below when opened in Notepad++. You see a lot
of very weird characters that you sometimes see if your computer crashes. (There are actually 82 lines of these strange
hidden characters in this four-word document!) You will not be able to view this in a web browser.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 2
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
If you are using a Mac at home then you could use TextEdit which you will find in your Applications folder. Unlike
Notepad, TextEdit works as a word processor by default. However, you want to use TextEdit as a plain text editor,
so you will need to adjust some of TextEdit’s preferences. Start TextEdit ► select TextEdit ► find Preferences
in the menu to bring up the Preferences screen ►sSelect Plain text within the New Document Attributes ► close
the Preferences screen. The next time you create a new file in TextEdit, it will be a plain text document.
Instead of Notepad you could use Notepad++. I prefer to use Notepad++ because it colours the various parts of
your code making it easier to spot errors and it includes line numbers. There are other webpage coding alternatives
which you could use, some of which are quite pricy or do not offer the latest HTML and CSS developments.
Examples of these include Adobe Dreamweaver and Microsoft Expression Web. I do not recommend that you
use these until you know the basics first. I prefer not to use either of these myself because they occasionally include
unnecessary code which reduces webpage download and rendering time. To use Notepad++ you have to download
and install it on your PC.
As of 28th Jan 2016 Notepad++ is at version 6.8.8 and is a free download from:
http://notepad-plus-plus.org/
I recommend that you download a copy of Notepad++ for your home PC.
There isn’t a Mac version of Notepad++ so a better text editor than TextEdit for a Mac is TextWrangler. This is a
free download available from:
http://www.barebones.com/products/textwrangler/
Whenever I tell you to use Notepad++ you could use either Notepad or Notepad++ on a PC, or either TextEdit or
TextWrangler on a Mac.
You will also need one or more popular web browsers. A browser is a software program that converts HTML and
other related types of webpage code into the webpages that you see when you surf the internet. When you purchase
a computer it will come preloaded with a browser. Nowadays PC’s come with Microsoft Edge and Mac’s come with
Safari. You can have more than one type of browser on your computer at a time. Almost all of the various browsers
are free to download and there are many companies that make them.
As of 28th Jan 2016 the nine most popular browsers across the planet, when you are taking into consideration all
types of devices including mobiles, tablets, consoles, laptops and desktops, are: Google Chrome (more than 47% of
people use this browser), Apple Safari (more
than 13% of people using this browser),
Microsoft Internet Explorer (more than 9%
of people use this browser), Mozilla Firefox
(almost 9% of people use this browser), UC
Browser (more than 7% of people using this
mobile phone browser), Opera (more than 5%
of people use this browser), Android (almost
5% of people using this mobile phone
browser), Microsoft Edge (almost 1% of
people using this browser), and IE Mobile
(almost 1% of people using this mobile phone
browser). There are at least another 122
browsers that I know of such as Maxthon,
Camino, Avant and Iron.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 3
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
Notes: 1/ I do not recommend that you download the Iron browser as it tried to install a number of computer threats
including Trojans and viruses that my Norton antivirus software thankfully blocked! It also changed the
homepages and preferred search engines that I had set for all of the browsers to use so it took me a bit of
time to get these things all back to my usual settings!
2/ For a good list of browsers (and other great web development tutorials) surf to:
www.webdevelopersnotes.com/design/browsers_list.php3
3/ To compare browser usage surf to:
http://gs.statcounter.com/
Even though you will be learning HTML5 code, at present none of the very latest browsers fully implement the
current HTML5 standards. Some browsers are further advanced in their HTML5 implementation than others. You
might guess that Microsoft Edge 13 is the best at displaying HTML5 code because it comes preinstalled with all the
latest PC’s, and more PC’s are sold around the world than Apple Macintosh computers which come preinstalled with
Safari 9, but you would be wrong. In fact, as of Jan 2016 the best browser at implementing HTML5 is Google
Chrome 44 with Opera 31 coming second and Mozilla Firefox 40 coming third. You can compare how far along
the various browsers are at implementing HTML5 at: http://html5test.com/index.html.
All the coding elements from XHTML and HTML4.01 are included in HTML5, so you can actually start using that
now if you know anything about either of these, even on your old pages. Using HTML5 does not change any of the
old things, but allows new semantic elements to be used and validated. We will cover those items in future lessons.
HTML5 builds on the success of XHTML and HTML 4.01, so relax; you do not have to unlearn things that you may
already know. You can just add to it at will.
Note: The following were depreciated in XHTML 4.01 and are not supported in HTML5. Do not use any of these
in any of your HTML5 webpage coding because they will not work on the latest browsers:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>,
<frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> <xmp>.
I warned my learners and students years ago not to use depreciated HTML tags because they would become
obsolete one day soon and lose browser support. If you were one of my students back then, I hope you listened
to me!
Almost everything that you will learn in this course will work on all of the latest browsers and much of this is
backward compatible. You will be shown how to get around any inconsistencies.
 Make sure that you are using the latest versions of the browsers that you commonly use and update them
regularly. (This is usually found in Tools or Help or About – hunt around!)
 Starting out as a webpage coder you should use, at the very least, two different browsers on your computer so
that you can test your how your webpages look on these browsers. One of these should be one of the better
browsers at supporting HTML5 (Google Chrome, Mozilla Firefox or Opera) and the other should be one of the
not-so-good at supporting HTML5 (Apple Safari or Microsoft Edge)
Question 2/
Name the five most popular web browsers used on a desktop computer/laptop/mobile… today and
the percentage of people that use them.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 4
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
Tags and Elements
HTML is a series of tags that are integrated into a text document that tell a browser what to do and what to use.
HTML tags use either English words (such as table which is used to create a data table) or abbreviations (such as
p which is used for paragraphs), but they are distinguished from the regular text in a document because they are
placed inside angle brackets < and >. So the table tag is <table> and the paragraph tag is <p>. The letters inside
the angle brackets are called HTML elements so <table> is a tag and table is an HTML element. Most people that
write about webpage construction write element names using uppercase letters so you would write <table> when
referring to the tag and TABLE when referring to the element. Generally I refer to the HTML tags rather than the
HTML elements so as to avoid any confusion.
Some tags tell a browser how a webpage will be formatted (E.g. <p> which is used to begin a new paragraph), and
others tell how the words appear (<b> makes text stand out in bold type). Still other tags provide information that
does not appear in a webpage itself. (Eg <title> places information in the webpage tab and is used by search engines
such as Google.)
The first thing to remember about tags is that they usually come in pairs. Every time you use a tag such as <p> you
must also close it off when you have finished whatever it is you are constructing with its closing tag. In the case of a
paragraph it would be </p>.
Note: A closing tag is distinguishes from its opening tag by the forward slash / before the tags element.
All HTML pages must begin with the tag <html> and end with </html>. In between these, a webpage has two
sections called the header and the body.
The header section starts with <head> and ends with </head> tags and contains information about a webpage
that will not appear on the webpage itself, such as the TITLE text. The body section uses the <body> and </body>
tags and between these two are where all the information that you want to display in a webpage is placed as well as
the HTML code that formats and positions all of this information.
Question 3/
When you hear about depreciated HTML what is this referring to?
Before you start to make a webpage using HTML you should tell a browser what type of HTML code you will be
using. Prior to HTML5 you usually had to include a few very long lines of gobbledegook but thankfully this has now
been shortened to <!DOCTYPE html> typed exactly as I have shown and this means that what follows after it
is HTML5 code. There is no closing tag for this and in fact it is not really even considered an HTML tag.
After this comes the <html> opening tag and within this tag you should tell a browser which human language
(English, French, Russian …) you will be using in most of your webpage. To do this in HTML5 you add an attribute
inside the <html> tag. This will make it easier for search engines such as Google to catalogue your webpage. In this
course you will be using the English language so the opening tag becomes <html lang = "en">. (This does not
mean that you can’t include a quote or perhaps a paragraph in your webpage that might be written in another language
and you will find out how to handle this later in the HTML5 course.) The closing tag does not change. It remains as
</html>. There are language codes for most other languages used around the world today.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 5
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
Template Construction
 Open Notepad++ and make sure the text encoding is set to UTF-8 by choosing Encoding Encode in UTF8 without BOM. The UTF-8 plain text file format is preferred by all web browsers.
Notes: 1/ If you are using Notepad then when you save your files make sure the Encoding: drop-down menu,
which is to the left of the Save button, is set to UTF-8 plain text file format. (For the technically
minded: this defines what character coding is used in your webpage. UTF-8 = Unicode Text Format
and is compatible with ASCII or plain text for the basic alphanumeric characters.)
2/ If you are using an Apple Mac computer and TextEdit then when you save your files make sure the
Plain Text Encoding: drop-down menu is set to Unicode (UTF-8) plain text file format.
3/ If you are using a Mac and TextWrangler then, when starting a new webpage, set the encoding to
UTF-8 plain text file format by choosing Format ► Make Plain Text.
4/ If you are using Adobe Dreamweaver then this is set automatically but you can check if you like:
Edit ► Preferences… ► New Document ► Default Encoding ► Unicode (UTF-8).
 Copy (highlight and then use CTRL + C) all of the following HTML5 code into Notepad++ (CTRL + V):
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Describe your webpage here in no more than 4 words</title>
</head>
<body>
Your content here...
</body>
</html>
 Save your work to both your SPAN Level 1 Web Development folder and to your USB thumb drive Level 1
Web Development folder naming the file as template.html (Make sure that you type the .html
extension. – When saving webpage files using Notepad++, you must always include the .html extension after
the file name.)
The code shown above is the basic code needed for any HTML5 webpage. It will become the template or skeleton
for every HTML5 document that you will make. This template will save you typing it out again and again every time
you start a new webpage document.
Never change template.html unless I direct you to do so.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 6
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
Inside the <head> … </head> section above you can see that there are two tags:
1.
<meta charset = "utf-8"> is called a Meta tag. There are many different Meta tags most of which give details
or instructions to search engines. Usually Meta tags are placed after the <title> … </title> in the <head> …
</head> section but this particular tag must be placed in the first 1024 bytes so it is best placed here.
The charset Meta tag tells a browser what character encoding to use. If you don’t use it, you risk that some
characters used in your webpage content could be misinterpreted by a browser. This is especially true if you are
using characters in your webpage from a language other than English. For example the Greek lower-case alpha
α or a French character like á.
2.
<title> … </title> encloses text that shows up in the title bar or the tab in most browsers. Once a webpage has
been catalogued by a search engine it also becomes the clickable text link to that webpage (in most search engine
cases).
Now that you have created your webpage template you can use it to start to develop your task 1 webpages.
 Make a copy of template.html
saving the copy in your SPAN Level 1 Web Development folder.
 Rename this copy as task1-yi.html replacing yi with your initials.
To open a file in any browser using a PC you could right-click on the file and choose Open with and then you click
on the browser you want to use. If you have your favourite browser open then you could use a keyboard shortcut Ctrl
+ O to open files. This works with most browsers.
 Open task1-yi.html in your favourite browser. All you should see is the title section (“Describe your webpage
here in no more than 4 words”) in the tab at the top of the webpage or in top bar of the browser window. The
main body section of the webpage will contain the text “Your content here…”. If you have any problems call
your teacher over for some help.
 Make the following change to task1-yi.html: Change the title section’s words from “Describe your webpage
here in no more than 4 words” to “Learning HTML5: Your name”.
 Save the change.
 Look at task1-yi.html in a browser. The tab text should show your TITLE text.
When you build a webpage you should limit the <title> … </title> text to 59 characters or less counting the spaces
as well so that it is compatible with all search engines guidelines. If you want your webpage to rank as highly as
possible with search engines such as Google then the title text should be as brief as possible and should relate to the
overall topic in your webpage. It is also the clickable text in search engines when they display a link to your page.
Search Engine Optimisation (SEO) is all about making sure your websites rank well in search engines and there
are many things that you need to do with your website code and your text to have it placed on the first page of a
search engines results. You will hear a lot about SEO throughout this course.
Question 4/
What does HTML stand for?
Question 5/
What does <title> and </title> let you do in a webpage?
Question 6/
Name three search engines.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 7
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
Adding Text
 Using a browser go to http://www.fillerati.com/ (The text found here is copyright free.)
 Click on the text button.
 Copy 750 words by clicking at the right end of the slider.
 Paste your 750 words between <body> and </body> deleting anything that might already be between these two
tags.
 Using the Enter button on your keyboard separate your text into three paragraphs.
 Include a number of spaces between any two words in your first line (to make it easy to spot these spaces).
 Add a few tabs between any two words in the second line of your text using the Tab button on your keyboard.
 Save your text addition and changes.
 Look at task1-yi.html in a browser. You should be able to see your added text in your webpage however it will
not be formatted (set out) as you might have expected.
When you use any simple webpage text editor such as Notepad++, placing more than one space or any number of
tabs ( Tab) between words or placing any number of returns ( Enter) into an HTML document will result in the
extra spaces, tabs or returns being completely ignored by browsers. All you will get when viewing your webpage is
a single space no matter how many spaces, tabs or returns you type in.
Knowing that adding extra spaces, tabs and returns in your HTML code are all ignored by all browsers then, with
this in mind, it is a good idea to set out your HTML code so that it is easy to follow. Use spaces, tabs and
Enters/Returns (which you will see that I always do) in your code to set it out neatly. This will make it easier for you
and others working with you to read your code and it will reduce the amount of errors you make. If you do make
errors then setting your code out neatly will help you to spot where your errors are.
Paragraphs
The first HTML tag in the <body> … </body> section that you will look at is called a paragraph tag. You use <p>
to tell the browser that you want to start a paragraph. </p> is used to tell the browser that you are at the end of a
paragraph. When you use <p> … </p> you get a blank line after the paragraph.
If you do not use a closing tag for each opening tag then your webpages may not be displayed as you intended in all
browsers so remember to put them in your HTML code.
 Add paragraph tags before and after each of your paragraphs using <p> before each paragraph and </p> at the
very end just as shown below and start each paragraph on a new line:
<p>Any old list of sentences. A paragraph should contain at least two lines of text.</p>
 Save your changes.
 Refresh and view your document in a browser. You should now see your webpage divided up into paragraphs.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 8
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
Headings
Next you will look at section headers. These are used for creating headings and subheadings in your webpages.
There are six different section headings that you can use: <h1> to <h6>.
For SEO purposes, use only one <h1> heading as your main heading in a webpage. Always include a <h1> heading.
<h2> headings are used to create subheadings underneath a <h1> heading. <h3> headings are used to create
subheadings underneath a <h2> heading and so on.
Keep your headings to the point. They must directly relate to the text that follows under that heading for SEO
purposes. Ensuring that this is done will improve your webpage ranking in search engines.
 Between the <body> code and the </body> code make the following additions to task1-yi.html:
, next type “Learning HTML5 and CSS 3: Without the
1.
On the line after <body> type <h1>
gobbledegook” and then type </h1>
2.
On the next line type <h2> next type in two or three words and then type </h2>
3.
On the next line type <h3> next type in two or three words and then type </h3>
4.
On the next line type <h4> next type in two or three words and then type </h4>
5.
On the next line type <h5> next type in two or three words and then type </h5>
6.
On the next line type <h6> next type in two or three words and then type </h6>
 Save your six additions.
 Refresh your webpage in a browser. You should see six different sized heading texts in your browser with each
on a new line.
Note: At the moment you are learning how to code a webpage using HTML and not creating a “live” webpage so
for now you do not have to worry too much about SEO.
When you use section headings, each heading is usually displayed in bold type using a “Times New Roman” fontface but this depends on the web browser that you are using. <h1> headings usually have the biggest font size going
down to <h6> headings which are usually the smallest in size.
The text that you use in both the <title> … </title> tag and in all the six types of section headings are used by search
engines such as Google and Yahoo to catalogue websites.
When constructing a webpage that will be placed on the internet remember:

Keep the text in both the <title> … </title> and in the section headings to just a few words – the shorter the
better for your search engine listing.

If the title text or if any of your section heading texts are too long then search engines will completely ignore
listing that webpage or it will not be listed properly.

The title text and headings must relate to your content.
Question 7/
What is a web browser?
Question 8/
Explain what website SEO is about.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 9
Updated:29 January 2016
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
When you make a typing error in your HTML code then the error is called a “bug”. (Computer programmers using
any of the hundreds of different programming languages use the term “bug” to indicate that there is an error in their
code.) Web browsers either ignore bugs completely or they assume that a bug is text to be shown in your webpage.
You need to be very careful when you type your HTML code because no error messages are given. If you accidentally
make a typing mistake then your webpage output may not turn out the way you planned. This may cause you
headaches so be very careful!
Question 9/
What is a bug? Give an example of a bug.
Question 10/ What is the difference between computer input and computer output?
Question 11/ What is the error in the following line of HTML code?
<1h>Spot the bugs</1h>
 Back up everything that you have done in this class to your USB stick. You should do this at the end of every
class that you take here at SPAN so that you have a backup copy of your files You can then revise what you
have covered in class at home over the coming week.
 Have you backed up all of your work at the end of this lesson to your USB thumb drive?
 Have you been saving your work to the SPAN student drive every 10 minutes?
 Show your webpage to Mr Kruyer for assessment. Also hand in the answers to the questions next week.
Due Dates:
All questions from this task and task1-yi.html should be completed by next week’s
lesson.
C:\Users\GerryKruyer\Documents\SPAN\HTML5\learning-tasks\level-1\tasks\task1\TYHTML1.docx
Page 10