Scribd
Upload
2 views31 pages

HTML Introduction PDF

The document is a web development training manual from Klick Institute, focusing on HTML basics. It covers topics such as HTML structure, tags, elements, and the importance of the DOCTYPE declaration. Additionally, it provides practical examples and guidelines for creating simple web pages using HTML.

Uploaded by

mundialspecial
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views31 pages

HTML Introduction PDF

The document is a web development training manual from Klick Institute, focusing on HTML basics. It covers topics such as HTML structure, tags, elements, and the importance of the DOCTYPE declaration. Additionally, it provides practical examples and guidelines for creating simple web pages using HTML.

Uploaded by

mundialspecial
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….

WEB DEVELOPMENT TRAINING MANUAL

HTML Introduction
HTML Example
<!DOCTYPE html>
<html>

<head>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The DOCTYPE declaration defines the document type
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph

The <!DOCTYPE html> declaration is the doctype for HTML5.

What is HTML?
HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language


 HTML is a markup language
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages

HTML Tags
1
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

HTML markup tags are usually called HTML tags.

 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a slash before the tag name
 Start and end tags are also called opening tags and closing tags

HTML Elements
In HTML, most elements are written with a start tag (e.g. <p>) and an end tag (e.g. </p>), with the content
in between:

<p>This is a paragraph.</p>

Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML
documents and display them as web pages.

The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML
page is to be presented/displayed to the user:

2
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

HTML Page Structure


Below is a visualization of an HTML page structure:

<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

HTML Versions
Since the early days of the web, there have been many versions of HTML:

Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration helps the browser to display a web page correctly.

There are many different documents on the web, and a browser can only display an HTML page 100%
correctly if it knows the HTML version and type used.

3
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Common Declarations
HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"[Link]

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"[Link]

The primary thing to keep in mind, the supermagic key, is that HTML is used for meaning and CSS is used for
presentation. HTML is nothing more than fancy structured content and the visual formatting of that content will
come later when we tackle CSS.

Contents
 Getting Started: What you need to do to get going and make your first HTML page.
 Tags, Attributes and Elements: The stuff that makes up HTML.
 Page Titles: Titles. For Pages. A difficult concept, we know…
 Paragraphs: Structuring your content with paragraphs.
 Headings: The six levels of headings.
 Lists: How to define ordered and unordered lists.
 Links: How to makes links to other pages, and elsewhere.
 Images: Adding something a bit more than text…
 Tables: How to use tabular data.
 Forms: Text boxes and other user-input thingamajigs.
 Putting It All Together: Taking all of the above stuff and shoving it together. Sort of in a recap
groove.

Getting Started
4
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Most of the stuff on the web is no different than the stuff on your computer — it’s just a whole load of files
sorted into a whole load of directories.

HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more
than a simple text editor.

Notepad is a common text editor on Windows-based computers (usually found under the Programs >
Accessories menu) and Mac OSX computers come bundled with TextEdit but any program that lets you
fiddle with text will do.

Type this in to your text editor:

This is my first web page

Now create a folder called “html” wherever you like to save files on your computer and save the file as
“[Link]”.

Be careful. It is important that the extension “.html” is specified - some text editors, such as Notepad, will
automatically save it as “.txt” otherwise.

You also need to ensure that your file is being saved as plain text. TextEdit, for example, will start new files
as “Rich text”, containing lots of formatting extras, by default. In such cases, go into the preferences and
make sure you check the “Plain text” format option before creating a new file.

To look at HTML files, they don’t even need to be on the web. Open a web browser such as Chrome,
Firefox, Safari or Internet Explorer and in the address bar, where you usually type web addresses, type in
the location of the file you just saved (for example, “c:\html\[Link]”) and hit return.
Alternatively, go to the File menu of the browser, select Open, and browse for the file.

Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.

We’ve said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated
software program such as Adobe Dreamweaver.

You should be very careful when using these programs, especially if you are a beginner, because they often
throw in unnecessary or non-standard code to “help” you.

If you’re serious about learning HTML, you should read through a tutorial such as this first, so that you at
least have a basic understanding of what is going on.

Software programs such as these will never give you the same control over a web page as coding by hand.

If you do decide to use specialized code-editing software, we recommend one in which you are still coding
by hand. They can, in fact, be helpful, especially the more advanced you become, in terms of code syntax
highlighting and file management.

5
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Tags, Attributes, and Elements


Although the basics of HTML is plain text, we need a bit more to make it a nice and shiny HTML
document.

Tags
The basic structure of an HTML document includes tags, which surround content and apply meaning to it.

Change your document so that it looks like this:

<!DOCTYPE html>
<html>
<body>
This is my first web page
</body>
</html>

Now save the document again, go back to the web browser and reload the page.

The appearance of the page will not have changed at all, but the purpose of HTML is to apply meaning, not
presentation, and this example has now defined some fundamental elements of a web page.

The first line on the top, <!DOCTYPE html>, is a document type declaration and it lets the browser know
which flavor of HTML you’re using (HTML5, in this case). It’s very important to stick this in - If you don’t,
browsers will assume you don’t really know what you’re doing and act in a very peculiar way.

To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything
between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is
the main content of the document that will appear in the browser window.

Closing tags

The </body> and </html> put a close to their respective elements (more on elements in a moment).

Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will
close themselves. The line-break tag for example, looks like this : <br> - a line break doesn’t hold any
content so the tag merrily sits by its lonely self. We will come across these examples later. All you need to
remember is that all tags with content between them should be closed, in the format of opening tag →
content → closing tag. It isn’t, strictly speaking, always a requirement, but it’s a convention we’re using in
these tutorials because it’s good practice that results in cleaner, easier to understand code.

You might come across “self-closing” tags, whereby a br tag, for example, will look like “<br />” instead
of simply “<br>”. This is a remnant of XHTML, a form of HTML based on another markup language called

6
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

XML. HTML5 is much more chilled out than XHTML and will be happy with either format. Some
developers prefer one way, some prefer the other. We tossed a coin and decided to stick with the simpler
version.

Attributes
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag
and their values sit inside quotation marks. They look something like <tag
attribute="value">Margarine</tag>. We will come across tags with attributes later.

Once again, quotation marks aren’t always essential but it is a good-practice convention HTML Dog uses
for consistency and clarity. We suggest you do the same.

Elements
Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that
make up web pages. You would say, for example, that everything that is in between (and includes) the
<body> and </body> tags is the body element. As another example, whereas “<title>” and “</title>”
are tags, “<title>Rumple Stiltskin</title>” is a title element.

Page Titles
All HTML pages should have a page title.

To add a title to your page, change your code so that it looks like this:

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
</body>
</html>

We have added two new elements here, that start with the head tag and the title tag (and see how both of
these close).

7
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Paragraphs
Now that you have the basic structure of an HTML document, you can mess around with the content a bit.

Go back to your text editor and add another line to your page:

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
How exciting
</body>
</html>

Look at the document in your browser.

You might have expected your document to appear as you typed it, on two lines, but instead you should see
something like this:

This is my first web page How exciting.

This is because web browsers don’t usually take any notice of what line your code is on. It also doesn’t take
any notice of spaces (you would get the same result if you typed “This is my first web page How
exciting”).

If you want text to appear on different lines or, rather, if you intend there to be two distinct blocks of text
(because, remember, HTML is about meaning, not presentation), you need to explicitly state that.

Change your two lines of content so that they look like this:

<p>This is my first web page</p>


<p>How exciting</p>

The p tag is used for paragraphs.

Look at the results of this. The two lines will now appear on two lines because the browser recognizes them
as separate paragraphs.

Think of the HTML content as if it were a book - with paragraphs where appropriate.

8
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Emphasis
You can emphasize text in a paragraph using em (emphasis) and strong (strong importance).

<p>Yes, that really <em>is</em> exciting. <strong>Warning:</strong> level of


excitement may cause head to explode.</p>

Traditionally, browsers will display em in italics and strong in bold by default but they are not the same as
i and b tags which (although they have been tenuously redefined in HTML5) have their origins in italic and
bold - remember - HTML isn’t for presentation. If you want to emphasize something visually (making
something italic, for example), you almost certainly want to give it general emphasis. You can’t speak in
italics.

Line breaks
The line-break tag can also be used to separate lines like this:

This is my first web page<br>


How exciting

There’s no content involved in breaking lines so there is no closing tag.

Headings
The p tag is just the start of text formatting.

If you have documents with genuine headings, then there are HTML tags specifically designed just for
them.

They are h1, h2, h3, h4, h5 and h6, h1 being the almighty emperor of headings and h6 being the lowest pleb.

Change your code to the following:

<!DOCTYPE html>

<html>

<head>
<title>My first web page</title>
</head>

<body>
9
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

<h1>My first web page</h1>

<h2>What this is</h2>


<p>A simple page put together using HTML</p>

<h2>Why this is</h2>


<p>To learn HTML</p>
</body>

</html>

Note that the h1 tag is only used once, as the main heading of the page. h2 to h6, however, can be used as
often as desired, but they should always be used in order, as they were intended. For example, an h4 should
be a sub-heading of an h3, which should be a sub-heading of an h2.

Lists
There are two types of list; unordered lists and ordered lists. Unordered lists and ordered lists work the
same way, except that the former is used for non-sequential lists with list items usually preceded by bullets
and the latter is for sequential lists, which are normally represented by incremental numbers.

The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the
li tag is used to define each list item.

Change your code to the following:

<!DOCTYPE html>

<html>

<head>
<title>My first web page</title>
</head>

<body>
<h1>My first web page</h1>

<h2>What this is</h2>


<p>A simple page put together using HTML</p>

<h2>Why this is</h2>


<ul>
<li>To learn HTML</li>
<li>To show off</li>
<li>Because I've fallen in love with my computer and want to give her some
HTML loving.</li>
</ul>
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>

10
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

<li>To the little talking duck in my brain</li>


</ol>

<h2>Where to find the tutorial</h2>


<p><a href="[Link] Batch A 2015 Prospective Corps
Members May Likely Go To Camp in May Instead of March While Online Registration Starts
on 2nd of March 2015 </a></p>

</body>

</html>

If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will
see that the list will become numbered.

Lists can also be included in lists to form a structured hierarchy of items.

Replace the above list code with the following:

<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML
loving.</li>
</ul>

Links
So far you’ve been making a stand-alone web page, which is all very well and nice, but what makes the
Internet so special is that it all links together.

The “H” and “T” in “HTML” stand for “hypertext”, which basically means a system of linked text.

An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the
destination of the link.

Add this to your document:

<!DOCTYPE html>
11
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

<html>

<head>
<title>My first web page</title>
</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>


<p>A simple page put together using HTML</p>

<h2>Why this is</h2>


<p>To learn HTML</p>

<h2>Where to find the tutorial</h2>


<p><a href="[Link] Batch A 2015 Prospective Corps
Members May Likely Go To Camp in May Instead of March While Online Registration Starts
on 2nd of March 2015 </a></p>

</body>

</html>

The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as
“[Link] or it can be relative to the current page.

So if, for example, you had another file called “[Link]” in the same directory then the line of code
would simply be <a href="[Link]"> The miracle of moss in flight</a> or something
like this.

A link does not have to link to another HTML file, it can link to any file anywhere on the web.

A link can also send a user to another part of the same page they are on. You can add an id attribute to just
about any tag, for example <h2 id="moss">Moss</h2>, and then link to it by using something like this: <a
href="#moss">Go to moss</a>. Selecting this link will scroll the page straight to the element with that
ID.

Images
Things might seem a little bland and boring with all of this text formatting. Of course, the web is not just
about text, it is a multi-media extravaganza and the most common form of sparkle is the image.

The img tag is used to put an image in an HTML document and it looks like this:

<img src="[Link] width="120" height="90" alt="HTML Dog">

12
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above
example demonstrates, but is usually relative. For example, if you create your own image and save it as
“[Link]” in a directory called “images” then the code would be <img
src="images/[Link]"...

The width and height attributes are necessary because if they are excluded, the browser will tend to
calculate the size as the image loads, instead of when the page loads, which means that the layout of the
document may jump around while the page is loading.

The alt attribute is the alternative description. This is an accessibility consideration, providing meaningful
information for users who are unable to see the image (if they are visually impaired, for example).

Note that, like the br tag, because the img element does not enclose any content, no closing tag is required.

The construction of images for the web is a little outside of the remit of this website, but it is worth noting a
few things…

The most commonly used file formats used for images are JPEGs, GIFs, and PNGs. They are compressed
formats, and have very different uses.

A JPEG (pronounced “jay-peg”) uses a mathematical algorithm to compress the image and will distort the
original slightly. The lower the compression, the higher the file size, but the clearer the image.

JPEGs are typically used for images such as photographs.

A GIF (pronounced “jif”) can have no more than 256 colors, but they maintain the colors of the original
image. The lower the number of colors you have in the image, the lower the file size will be. GIFs also
allow any pixel in the image to be transparent.

GIFs are typically used for images with solid colors, such as icons or logos.

A PNG (pronounced “ping”) replicates colors, much like a GIF, but allows 16 million colors as well as
alpha transparency (that is, an area could be 50% transparent).

PNGs are typically used for versatile images in more complex designs BUT they are not fully supported by
some older browsers.

The web is forever getting faster and faster but you obviously want your web pages to download as quickly
as possible. Using super-high resolution images isn’t doing your or your user’s bandwidth (or patience) any
favors. Image compression is a great tool and you need to strike a balance between image quality and image
size. Most modern image manipulation programs allow you to compress images and the best way to figure
out what is best suited for yourself is trial and error.

13
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Tables
HTML tables are still best known for being used and abused to lay out pages.

The correct use for tables is to do exactly what you would expect a table to do - to structure tabular data.

There are a number of tags used in tables, and to fully get to grips with how they work is probably the most
difficult area of this HTML Beginner Tutorial.

Copy the following code into the body of your document and then we will go through what each tag is
doing:

<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

The table element defines the table.

The tr element defines a table row.

The td element defines a data cell. These must be enclosed in tr tags, as shown above.

If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three
td elements within each of the rows, making a total of 12 td elements.

14
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Forms
Forms are used to collect data inputted by a user. They can be used as an interface for a web application, for
example, or to send data across the web.

On their own, forms aren’t usually especially helpful. They tend to be used in conjunction with a
programming language to process the information inputted by the user. These scripts take all manner of
guises that are largely outside of the remit of this text because they require languages other than HTML and
CSS e.g PHP.

The basic tags used in the actual HTML of forms are form, input, textarea, select and option.

form
form defines the form and within this tag, if you are using a form for a user to submit information (which
we are assuming at this level), an action attribute is needed to tell the form where its contents will be sent
to.

The method attribute tells the form how the data in it is going to be sent and it can have the value get,
which is default, and latches the form information onto a web address, or post, which (essentially) invisibly
sends the form’s information.

get is used for shorter chunks of non-sensitive information - you might see the information you have
submitted in a web site’s search to appear in the web address of its search results page, for example. post is
used for lengthier, more secure submissions, such as in contact forms.

So a form element will look something like this:

<form action="[Link]" method="post">

</form>

input
The input tag is the daddy of the form world. It can take a multitude of guises, the most common of which
are outlined below (see the input reference page for the whole crazy family):

 <input type="text"> or simply <input> is a standard textbox. This can also have a value attribute,
which sets the initial text in the textbox.
 <input type="password"> is similar to the textbox, but the characters typed in by the user will be
hidden.
 <input type="checkbox"> is a checkbox, which can be toggled on and off by the user. This can also
have a checked attribute (<input type="checkbox" checked> - the attribute doesn’t require a value),
and makes the initial state of the check box to be switched on, as it were.
15
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

 <input type="radio"> is similar to a checkbox, but the user can only select one radio button in a group.
This can also have a checked attribute.
 <input type="submit"> is a button that when selected will submit the form. You can control the text
that appears on the submit button with the value attribute, for example <input type="submit"
value="Ooo. Look. Text on a button. Wow">.

Note that, like img and br tags, the input tag, which doesn’t surround any content, doesn’t require a closing
tag.

textarea
textarea is, basically, a large, multi-line textbox. The anticipated number of rows and columns can be
defined with rows and cols attributes, although you can manipulate the size to your heart’s content using
CSS.

<textarea rows="5" cols="20">A big load of text</textarea>

Any text you choose to place between the opening and closing tags (in this case “a big load of text”) will
form the initial value of the text area.

select
The select tag works with the option tag to make drop-down select boxes.

<select>
<option>Option 1</option>
<option>Option 2</option>
<option value="third option">Option 3</option>
</select>

When the form is submitted, the value of the selected option will be sent. This value will be the text between
the selected opening and closing option tag unless an explicit value is specified with the value attribute, in
which case this will be sent instead. So, in the above example, if the first item is selected, “Option 1” will be
sent, if the third item is selected, “third option” will be sent.

Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected
attribute, to start off with one of the items already being selected, eg. <option
selected>Rodent</option> would pre-select “Rodent” from the items.

Names
All of the tags mentioned above will look very nice presented on the page but if you hook up your form to a
form-handling script, they will all be ignored. This is because the form fields need names. So to all of the
fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge">.
16
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

A form might look like the one below. (Note: this form will not work unless there is a “[Link]” file,
which is stated in the action attribute of the form tag, to handle the submitted date)

<form action="[Link]" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>

<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>

<p><input type="submit"></p>
</form>

17
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Putting It All Together


If you have gone through all of the pages in this HTML Beginner Tutorial then you should be a competent
HTMLer. In fact, you should be better than most.

The following code incorporates all of the methods that have been explained in the previous pages:

<!DOCTYPE html>

<html>

<head>

<title>My first web page</title>

<!-- This is a comment, by the way -->

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>


<p>A simple page put together using HTML. <em>I said a simple page put together using
HTML.</em> A simple page put together using HTML. A simple page put together using
HTML. A simple page put together using HTML. A simple page put together using HTML. A
simple page put together using HTML. A simple page put together using HTML. A simple
page put together using HTML.</p>

<h2>Why this is</h2>


<ul>
<li>To learn HTML</li>
<li>To show off</li>

<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I have fallen in love with my computer and want to give her some HTML
loving.</li>
</ul>

<h2>Where to find the tutorial</h2>


<p><a href="[Link] src="[Link]
width="120" height="90" alt="HTML Dog"></a></p>

<h3>Some random table</h3>


<table border=”1”>
<tr>
18
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

<td>Row 1, cell 1</td>


<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

<h3>Some random form</h3>


<p><strong>Note:</strong> It looks the part, but won't do a damned thing.</p>

<form action="[Link]" method="post">

<p>Name:</p>
<p><input name="name" value="Your name"></p>

<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked> Asexual</p>

<p><input type="submit"></p>

</form>
</body>

</html>

19
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

Applying CSS
There are three ways to apply CSS to HTML: In-line, internal, and external.

In-line
In-line styles are plonked straight into the HTML tags using the style attribute.

They look something like this:

<p style="color: red">text</p>

This will make that specific paragraph red.

But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation
free document, and so in-line styles should be avoided wherever possible.

Internal
Embedded, or internal, styles are used for the whole page. Inside the head element, the style tags surround
all of the styles for the page.

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>

p {
color: red;
}

a {
color: blue;
}

</style>
...

This will make all of the paragraphs in the page red and all of the links blue.

Although preferable to soiling our HTML with inline presentation, it is similarly usually preferable to keep
the HTML and the CSS files separate, and so we are left with our savior…

20
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will
simply look something like:

p {
color: red;
}

a {
color: blue;
}

If this file is saved as “[Link]” in the same directory as your HTML page then it can be linked to in the
HTML like this:

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="[Link]">
...

Apply!
To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh
new file with your text-editor and save the blank document as “[Link]” in the same directory as your
HTML file.

Now change your HTML file so that it starts something like this:

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" href="[Link]">
</head>
...

Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a
thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the
CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did

before. Selectors, Properties, and Values


Whereas HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external
21
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

style sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors, which are simply
the names of HTML tags and are used to change the style of a specific type of element.

For each selector there are “properties” inside curly brackets, which simply take the form of words such as
color, font-weight or background-color.

A value is given to the property following a colon (NOT an “equals” sign) and semi-colons separate the
properties.

body {
font-size: 14px;
color: navy;
}

This will apply the given values to the font-size and color properties to the body selector.

So basically, when this is applied to an HTML document, text between the body tags (which is the content
of the whole window) will be 14 pixels in size and navy in color.

Lengths and Percentages


There are many property-specific units for values used in CSS, but there are some general units that are used
by a number of properties and it is worth familiarizing yourself with these before continuing.

 px (such as font-size: 12px) is the unit for pixels.


 em (such as font-size: 2em) is the unit for the calculated size of a font. So “2em”, for example, is
two times the current font size.
 pt (such as font-size: 12pt) is the unit for points, for measurements typically in printed media.
 % (such as width: 80%) is the unit for… wait for it… percentages.

Other units include pc (picas), cm (centimeters), mm (millimeters) and in (inches).

When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it
would be border: 0.

“px” in this case, doesn’t actually necessarily mean pixels - the little squares that make up a computer’s
display - all of the time. Modern browsers allow users to zoom in and out of a page so that, even if you
specify font-size: 12px, or height: 200px, for example, although these will be the genuine specified
size on a non-zoomed browser, they will still increase and decrease in size with the user’s preference. It’s a
good thing. Trust me.

Colors
CSS brings 16,777,216 colors to your disposal. They can take the form of a name, an RGB (red/green/blue)
22
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

value or a hex code.

The following values, to specify full-on as red-as-red-can-be, all produce the same result:

 red
 rgb(255,0,0)
 rgb(100%,0%,0%)
 #ff0000
 #f00

Predefined color names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
orange, purple, red, silver, teal, white, and yellow. transparent is also a valid value.

Color names and sRGB values


black = "#000000" green = "#008000"

silver = "#C0C0C0" lime = "#00FF00"

gray = "#808080" olive = "#808000"

white = "#FFFFFF" yellow = "#FFFF00"

maroon = "#800000" navy = "#000080"

red = "#FF0000" blue = "#0000FF"

purple = "#800080" teal = "#008080"

fuchsia = "#FF00FF" aqua = "#00FFFF"

Thus, the color value "#800080" is the same as "purple".

With the possible exception of black and white, color names have limited use in a modern, well-designed
web sites because they are so specific and limiting.

The three values in the RGB value are from 0 to 255, 0 being the lowest level (no red, for example), 255
being the highest level (full red, for example). These values can also be a percentage.

Hexadecimal (previously and more accurately known as “sexadecimal”) is a base-16 number system. We
are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from
0 to f.

The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the

23
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

three-digit version is a compressed version of the six-digit (#ff0000 becomes #f00, #cc9966 becomes
#c96, etc.). The three-digit version is easier to decipher (the first digit, like the first value in RGB, is red, the
second green and the third blue) but the six-digit version gives you more control over the exact color.

CSS3, the latest version of CSS, also allows you to define HSL colors - hue, saturation and lightness. More
on this, along with semi-transparent colors, can be found in the CSS Advanced Tutorial.

color and background-color


Colors can be applied by using color and background-color (note that this must be the American English
“color” and not “colour”).

A blue background and yellow text could look like this:

h1 {
color: yellow;
background-color: blue;
}

These colors might be a little too harsh, so you could change the code of your CSS file for slightly different
shades:

body {
font-size: 14px;
color: navy;
}

h1 {
color: #ffc;
background-color: #009;
}

Save the CSS file and refresh your browser. You will see the colors of the first heading (the h1 element)
have changed to yellow and blue.

You can apply the color and background-color properties to most HTML elements, including body,
which will change the colors of the page and everything in it.

Text
You can alter the size and shape of the text on a web page with a range of properties.

font-family

24
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

This is the font itself, such as Times New Roman, Arial, or Verdana.

The user’s browser has to be able to find the font you specify, which, in most cases, means it needs to be on
their computer so there is little point in using obscure fonts that are only sitting on your computer. There are
a select few “safe” fonts (the most commonly used are Arial, Verdana and Times New Roman), but you can
specify more than one font, separated by commas. The purpose of this is that if the user does not have the
first font you specify, the browser will go through the list until it finds one it does have. This is useful
because different computers sometimes have different fonts installed. So font-family: arial,
helvetica, serif, will look for the Arial font first and, if the browser can’t find it, it will search for
Helvetica, and then a common serif font.

Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-
family: "Times New Roman".

You can use a wider selection than the “safe” fonts using several methods outlined in the CSS Advanced
Tutorial but if you’re just getting to grips with CSS, we suggest sticking with this basic standard approach
for the moment.

font-size
The size of the font. Be careful with this - text such as headings should not just be an HTML paragraph (p)
in a large font - you should still use headings (h1, h2 etc.) even though, in practice, you could make the font-
size of a paragraph larger than that of a heading (not recommended for sensible people).

font-weight
This states whether the text is bold or not. Most commonly this is used as font-weight: bold or font-
weight: normal but other values are bolder, lighter, 100, 200, 300, 400 (same as normal), 500, 600,
700 (same as bold), 800 or 900.

Play around with these font-weight values if you want see their effect but, keep in mind, that some older
browsers become a little confused with anything other than bold and normal so we suggest sticking to those
unless you’re a typography ninja.

font-style
This states whether the text is italic or not. It can be font-style: italic or font-style: normal.

text-decoration
This states whether the text has got a line running under, over, or through it.

 text-decoration: underline, does what you would expect.

25
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

 text-decoration: overline places a line above the text.


 text-decoration: line-through puts a line through the text (“strike-through”).

This property is usually used to decorate links and you can specify no underline with text-decoration:
none.

Underlines should only really be used for links. They are a commonly understood web convention that has
lead users to generally expect underlined text to be a link.

text-transform
This will change the case of the text.

 text-transform: capitalize turns the first letter of every word into uppercase.
 text-transform: uppercase turns everything into uppercase.
 text-transform: lowercase turns everything into lowercase.
 text-transform: none I’ll leave for you to work out.

So, a few of these things used together might look like this:

body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.5em;
}

a {
text-decoration: none;
}

strong {
font-style: italic;
text-transform: uppercase;
}

Text spacing
Before we move on from this introduction to styling text, a quick look at how to space out the text on a
page:

26
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

The letter-spacing and word-spacing properties are for spacing between letters or words. The value can
be a length or normal.

The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting
the size of the font. It can be a number (which specifies a multiple of the font size, so “2” will be two times
the font size, for example), a length, a percentage, or normal.

The text-align property will align the text inside an element to left, right, center, or justify.

The text-indent property will indent the first line of a paragraph, for example, to a given length or
percentage. This is a style traditionally used in print, but rarely in digital media such as the web.

p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}

Margins and Padding


margin and padding are the two most commonly used properties for spacing-out elements. A margin is the
space outside something, whereas padding is the space inside something.

Change the CSS code for h2 to the following:

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}

This leaves a 20-pixel width space around the secondary header and the header itself is fat from the 40-pixel
width padding.

The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom,
margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-
explanatory properties you can use.

The Box Model


Margins, padding and borders (see next page) are all part of what’s known as the Box Model. The Box
Model works like this: in the middle you have the content area (let’s say an image), surrounding that you

27
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

have the padding, surrounding that you have the border and surrounding that you have the margin. It can be
visually represented like this:

Margin box
Border box
Padding box
Element box

You don’t have to use all of these, but it can be helpful to remember that the box model can be applied to
every element on the page, and that’s a powerful thing!

Borders
Borders can be applied to most HTML elements within the body.

To make a border around an element, all you need is border-style. The values can be solid, dotted,
dashed, double, groove, ridge, inset and outset.

border-width sets the width of the border, most commonly using pixels as a value. There are also
properties for border-top-width, border-right-width, border-bottom-width and border-left-
width.

Finally, border-color sets the color.

Add the following code to the CSS file:

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels
wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel
wide width of the entire border).

28
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

<link rel "stylesheet" href "[Link]">


= =

CSS PRACTICAL
Putting It All Together
You should already have an HTML file like the one made at the end of the HTML Beginner Tutorial, with a
line that we added at the start of this CSS Beginner Tutorial, linking the HTML file to the CSS file.

29
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

The code below covers all of the CSS methods in this section. If you save this as your CSS file and look at
the HTML file then you should now understand what each CSS property does and how to apply them. The
best way to fully understand all of this is to mess around with the HTML and the CSS files and see what
happens when you change things.

body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
color: black;
background-color: #ffc;
margin: 20px;
padding: 0;
}

/* This is a comment, by the way */

p {
line-height: 21px;
}

h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 7px;
padding: 4px;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}

h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 2px;
padding-left: 14px;
}

h3 {
color: #999;
font-size: 1.25em;
}

img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
30
KLICK INSTITUTE OF COMPUTER & ICT STUDIES - IGANDO LAGOS…….WEB DEVELOPMENT TRAINING MANUAL

a {
text-decoration: none;
}

strong {
font-style: italic;
text-transform: uppercase;
}

li {
color: #900;
font-style: italic;
}

table {
background-color: #ccc;
}

31

You might also like