Anda di halaman 1dari 107

HTML/CSS

Lab Manual for CMP521A


Field Test 2009

Course Introduction
The acronym HTML stands for Hyper Text Markup Language. Hyper refers to the ability to link
to various elements and go to them when the user decides to resource them. Markup refers to
the things we do to make things appear different; bolding text for instance.
HTML codes instruct web browsers such as Internet Explorer, Firefox, Opera and Safari how to
display or present content without displaying the code. Content may include elements such as
text, images, audio, video and other multimedia files.
WYSIWYG (what you see is what you get) composers allow web page authors to quickly create
the look of a page; however, a good understanding of the code being inserted will allow the
author to make better coding choices when required. For example the hand coding of tables
is extremely time consuming and most web authors use WYSIWYG editors to accomplish tables
in a matter of seconds. On the other hand, because WYSIWYG composers insert the code in
the background you need to know what that code is and what it does if you need to troubleshoot
or tweak it so that "what you want is what you get". Most people only have experience working
with WYSIWYG editors and consider themselves quite well versed in making web pages.
Although they may create a satisfactory product, they will fall short when it comes to more
advanced interactivity and streamlining of information.
This course will teach you the basics about HTML and the benefits of Cascading Style Sheets
(CSS). Although by no means an in depth course, it will give you a solid background to build
upon. Although, this workbook will focus on hand coding, helpful hints as to when using a
WYSIWIG editor is best and how to overcome the limitations of one will be included.
** This course also has many links provided to websites which were deemed useful at the time
of authoring. As it is the transitory nature of the internet for pages to be deleted, moved,
changed, etc, it is important that you inform your instructor if the content is no longer useful,
available or appropriate.

Standardization

What is W3C?
W3C is an international body of organizations, full time staff and volunteers which has been in
existence since 1994. It has three main tasks: the creation of standards, education and
software development.
In order for the Web to reach its full potential, the most fundamental Web technologies must be
compatible with one another and allow any hardware and software used to access the Web to
work together. -- http://www.w3.org/Consortium/.
On the W3C website it states that it is a vendor-neutral forum for the creation of Web
standards -- http://www.w3.org/Consortium/. This will likely lead to an interesting discussion
once you begin to view your work in different web browsers!

The W3C Themes:


The Web for Everyone - accessibility options for physically challenged individuals, those with
older technology and slower Internet line speeds. Everyone needs access to the same
information but not necessarily in the same medium.
Web on Everything - device and operating system independent services.
Data Searching and Sharing - common search methods and interoperability between systems
to search and organize the world knowledge base.
Trust and Confidence - privacy of information and security of interactions. Understanding of
what data is appropriate to share and what must remain private.
As better, more efficient, technologies are developed new standards are written and older
methods are retired. For instance, frames, animated gifs, image maps, forms that "post"
information and many tag attributes are not longer widely used. These methods have been
replaced by cascading style sheets, flash objects and dynamic web interfaces for online
databases.

Accessibility
The Web Accessibility Initiative (WAI) website has a lot of useful and pertinent information on
the topic of accessibility. http://www.w3.org/WAI/

ASSIGNMENT
Create a slideshow identifying and explaining 10 points that all web developers
should pay attention to in terms of accessibility. You should provide examples to
support your explanations.
Save the slideshow with the filename accesibilityshow in a folder on your personal
drive called "labs". The course teacher will tell you which program to author these in
and will be reviewing these in the next few days and might choose yours to be used
as a class review.

In addition to reading through the above link, you may wish to check out some of the following
websites on this topic and/or do your own research as well.

Building Accessible Websites (http://joeclark.org/book/)

Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0


(http://www.w3.org/TR/WCAG10/full-checklist.html)

There are also helpful websites which will check your website for accessibility. What follows is
just a sampling. Do a search on web site accessibility tools and you might find even better
ones. Be sure to use some of these when you do your final HTML project as your site will
be checked for accessibility!

A-Prompt (http://www.aprompt.ca/download.html)

Vischeck: Colour Blind Checker (http://www.vischeck.com/vischeck/vischeckURL.php)

JuicyStudio: Image Checker (http://juicystudio.com/services/image.php)

UITest.com: Web Development Tools (http://uitest.com/en/check/)

Cynthia, online accessibility checker (http://www.contentquality.com/)

Adobe Test site for accessibility


(http://www.adobe.com/macromedia/accessibility/usablenet.html)

t.a.w. Web Accessibility Test (http://www.tawdis.net/taw3/cms/en)

ASSIGNMENT
Choose your favourite online website and test it for accessibility.

Prepare a

presentation for your classmates as to the extent to which HTML standards have been
applied to this site.

HTML Standardization
"The World Wide Web, invented in the early 1990's, made it possible to distribute documents
globally without worrying about what kind of computer or software the user had (as long as the
user had an Internet-connected computer and a Web browser, of course). The way the Web
was defined, the syntax of HTML was independent of computer type, and each kind of Web
browser created was meant to display an HTML file correctly.
At least this was the dream.
The reality is that during the 1990's, economic and cultural forces muddied the waters. Some
people made Web browsers that recognized HTML elements that had not been accepted as
standards. Some companies created Web browsers fashioned to recognize company-specific
(proprietary) HTML elements and attributes of elements. Some companies created Web
browsers that recognized proprietary elements and attributes that were in conflict with the
proprietary elements and attributes of other companies.
Without standards, the World Web Web becomes fragmented. When you have to worry about
what kind of browser you are using in order to see Web content, you're experiencing a problem
that the Web was originally invented to solve.
We need standards to make sure that all Web content is viewable by many different kinds of
Web browsers--and not just the Web browsers of today, but the handheld devices, cell phones,
or other Net devices that may be invented in the future.
Using standards also lowers HTML production and maintenance costs. By educating HTML
implementors in a fixed set of standards, you can reduce training time, increase the accuracy of
implementation, reduce display errors, improve the appearance of Web pages, and make it
possible for further maintenance with the least amount of hassle."
-- pasted from http://www.december.com/html/tutor/standards.html 2 Dec 2008

CSS Standards
The same rationale for developing standards with HTML can be applied to css. If you stick to
the standard codes, MOST web browsers will support them. Unfortunately, some of the "cool"
things can only be accomplished in one browser and this is where issues begin.
Even when you use standard coding, if you view the web page in various different browsers you
will note that there are some differences in display. ALWAYS test your page in various
browsers for this reason. Sometimes, you try to find a solution and might find advice that works
only on one browser. It is a good idea to not only have several browsers installed on your
computer, but if you can, several builds of the same browser.

HTML CODING

HTML
The acronym HTML stands for Hyper Text Markup Language. Hyper refers to the ability to link
to various elements and go to them when the user decides to resource them. Markup refers to
the things we do to make things appear different; bolding text for instance.
HTML codes instruct web browsers such as Internet Explorer, Firefox, Opera and Safari how to
display or present content without displaying the code. Content may include elements such as
text, images, audio, video and other multimedia files.

Coding Syntax
HTML formats all the information presented in your web browser with tags. Tags are always
enclosed in the angled brackets < >.

In order for them to work, they must be "spelled"

correctly.
Examples: <font> <b> <br> <p>
Tags tell the browser when to start formatting information with specific effects and when to stop
them. The effects are stopped by using the same tag with a forward slash before the tag.
Examples:

<b>

This

is

the

text

we

want

to

make

bold.</b>

<center> This is the text which we want to center </center>


Some tags do not require closing versions. These tags are for items which can only occur once.
Such as a line break, an image, a sound file, etc.
Examples:

<br>

<img src=picture.jpg:>
Tags often have a more complex structure which incorporates several elements.
Example: <img width =200 height=200 src=picture.jpg>
In this case, the image needed to be resized to 200x200 pixels. In general, images should be
resized in a graphics program. This will be discussed in greater detail in the images section.
Tags must also be "nested" correctly. When a tag is nested inside another it must be ended or
closed before the original tag is closed.
Example: <tag a>The quick brown fox jumps over the <tag b>lazy dog</tag b></tag a>
Although you may see examples where all coding is done in capital letters, this is not
necessary. In fact, the standard recommended by the W3C (World Wide Web Consortium) for
HTML 4 is lower case.

10

Document Structure
Every HTML document has the following basic structure. It starts and stops with the <html>
</html> code to tell the web browser accessing it that it is indeed an HTML page.

Specific details can be embedded in the


head section which are made use of by
search engines, etc but are hidden to the
viewer.
Information for display is included in the
body section.

ASSIGNMENT
In notepad, create a basic HTML document (it should look like above minus the
colours!!). Insert a sentence in between the <body> tags. For example: Welcome to
my website.
Save the file in your G:drive in a folder called "labs" as "index.htm". Be careful to
ensure that you include .htm at the end of the file nameotherwise notepad will save
it as a notepad file! Navigate to the file, open and view it in a web browser.

11

Basic HTML Codes


This section will examine some of the more commonly used codes. These are called "tags". In
addition, it will introduce many different ways to fine tune the tags through items called
"attributes".
They will be introduced attached to a specific element (text, images, etc); however, many tags
are not limited to use with that specific element. They will be expected to be applied to several
different elements upon learning them.

12

General Layout
We are used to the conventions of writing as taught to us in school. We understand what a
paragraph is, a heading is, a blockquote, etc and where and when these should be used. When
they are not used, people find reading and viewing content difficult and are more apt to seek out
another website even if the content is excellent on the one created without proper formatting.
Without HTML codes, all text will display in the web browser in a continuous line filling in the
screen from top to bottom.

ASSIGNMENT
In Notepad, open your index.htm file and replace the sentence you typed earlier with the
following text:
Our Beliefs We believe our schools are to provide a safe, caring learning
environment. We believe the education of our students is a partnership requiring
the committed involvement of educators, students, parents, community members
and agencies. We believe the school system exists to nurture the development of
our students. We believe it is our role to encourage and support students as life
long learners, responsible, ethical decision makers and stewards of our natural
resources.
Save the file using a new name (beliefs.htm) in your labs folder and preview in your web
browser.
It should look like the following:

13

14

Paragraphs/Line Breaks
The paragraph code <p> </p> should appear on either side of the text you wish to appear as a
paragraph. A visual space is automatically inserted in between consecutive paragraphs.

if you are using a WYSIWIG composer, simply press enter and a paragraph code will be entered.

If you desire that no visual space appear, you should use a line break <br> OR </br>. This is
one of those codes which is not required to have an opening and closing. You can use one or
the other.

if you are using a WYSIWIG editor, press shift-enter and a line break will be entered.

Example of 2 Paragraphs

Example of Line Breaks

15

Note that alignment formatting in a WYSIWIG editor will normally be applied to an entire
paragraph. If you are using a WYSIWIG editor and you wish to apply the formatting to a specific
portion of the text but the editor will not allow it, you will need to hand code!

Paragraphs can be aligned left, centre and right. Note that you should use the American
spelling of center for this to work.
<p align="center"> </p>
<p align="right"> </p>
<p align="left"> </p>

ASSIGNMENT
Open your file "beliefs.htm and use the paragraph code to create a new paragraph for
each belief. Save it as beliefsparas.htm and preview in your web browser.
It should look like the following and when the code is inspected should include the <p>
code to create the paragraphs:

16

Headings
Headings are used in html for the exact same reason they are used in print text.
HTML has 6 levels of Headings built into the code. These are used to create a consistent look
for all headings.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

You can quickly change the look of all headings using .css and override the
web browsers default presentation. This will be covered in the .css section.

ASSIGNMENT
The main heading of the web page you have been working on is Our Beliefs. Make this a
Level 1 Heading. Save it as beliefsheading.htm and preview in your web browser. It should look
as follows:

17

Horizontal Rules
Horizontal Rules are fairly obsolete in this day and age; however, their concept is sound when it
comes to general page layout. A horizontal rule is in effect a line to help delineate the space on
the page or to section off a document.
<hr>
Note that the horizontal rule tag is one that stands on it's own and does not require a closing
tag.
You can change the alignment, width, height(size) and shading of an <hr>.
Example: <hr align="left" width="300" size="10" noshade>

ASSIGNMENT
Insert a horizontal rule between the Our Beliefs heading and the paragraphs. Save the file as beliefsrule.htm
and preview in your web browser. It should look as follows:

18

Lists
In HTML there is very little you can do without tables to precisely place any information on the
page. HTML lists aid the programmer in defining steps or items on their own.
There are three types of lists available:

Ordered Lists

Unordered Lists

Definition Lists

The opening and closing tags for the entire list are <ol></ol>, <ul></ul> or <dl></dl>.
Each list item only has an opening tag which is <li>, unless using a definition list where you
would use <dt> and <dd>.
An ordered list automatically inserts numbers sequentially for each item listed.

Unordered lists follow the same type of format; however, the items in the list are in no order of
importance. Unordered lists make use of round bullets before each item listed.

Definition lists are slightly more complicated to create; however, they do have the benefit of
consistent formatting. Definition lists consist of a term and an interleaved and indented
definition.

19

This type of item is an excellent example of how you could use css. You can
change the <dt> tag to be bold, a different colour, etc to make it stand out
even more.

ASSIGNMENT
Create a new HTML file in notepad (or use your index.htm file as a template), and
create the three lists. There should be a minimum of 3 entries in each one. Save the
file in your labs folder as lists.htm.
BONUS
Add one list which combines ordered and unordered list information nested together.

20

Text Effects
Text can be adjusted to accomplish many different looks. Remember, this is what the markup
portion of HTML stands for.
Once you have learned .css you will see that most Text Effects can be adjusted for
an entire website using a style sheet. However, understanding how the same effects
occur via HTML will not only give you an appreciation for when and where to use .css
and/or HTML.

21

Simple Effects
Text can be changed in many ways similar to what you can accomplish in word processor. For
example you can change:

The font itself can be changed from the default font type.

The colour

The font size

It can be italicized

It can be bolded

It can be underlined

It can be struck through

Or a combination of these things can occur.

You can right align text.


You can centre align text.
You can left align text.
The code is inserted directly before and after the text you wish to change the look of.
This is extremely important to remember!
This is extremely <bold> important </bold> to remember!
You can underline text.
You can <u>underline</u> text.
You can italicize text.
You can <em>italicize</em> text.
You can change the colour of text.
You can change the <font color=#990033>colour</font> of text.
And of course you can apply a combination of all of the above.
And of course you can apply a <b><em><u>combination</u></em></b> of all of the above.

22

Note that when you apply a combination, you cannot change the order in which the specific
codes appear. If <b> is first, it must be last when it is closed.
You will find that once you have learned to hand code many font changes, that you
will appreciate the use of .css (cascading style sheets) to automate this and provide
consistency for your site.

Not every code available has been used above, you may need to do some searching on the
internet or make use of the cheat sheet or html tutorial sites available in Appendix A.

23

Fonts
Fonts are drawn from the computer they are displayed on. There are a limited number of fonts
which are installed on all Mac and PC machines.
To change from the default font (that is the font that the browser automatically applies when no
font is specified, use "face".
<font face="comic sans ms">This is the comic sans ms font"</font>
It is good idea to specify a secondary font optionalthough the above fonts are most likely
available on a computer, you never are 100% sure that the user did not delete them.
<font face="comic sans ms, verdana, arial"> </font>
In this case the browser know that if comic sans ms is not available on the computer, that it
should look next to the verdana font and then arial if the first two aren't there. If you do not
specify a font, text will display; however, you will have no control over what alternate font the
browser uses.

ASSIGNMENT
Recreate the following. You do not have to exactly match the colours and fonts.
Save the file as ourbeliefsfinal.htm. You can see the colour version of this on the
Atutor Course site.

24

Special Characters
In order to place special characters into a document, HTML requires a special code to
"recreate" them. Special characters are often referred to as "character entities". These are
characters which are either already used within HTML coding and therefore do not display (eg
<\>) or they are characters which are not included in the plain ASCII character set
There are many sources on the internet for character entities as there are many different
languages which make use of different symbols. You can research for specifics; however, the
following resource has a good selection of the most commonly used ones.

HTML Character Entities Cheat Sheet (http://www.addedbytes.com/download/htmlcharacter-entities-cheat-sheet/pdf/)

To enter a symbol, simply type in the code where you want it to appear.

ASSIGNMENT
In notepad, create a basic HTML document and create the following. Save it as
characters.htm in your "labs" folder. Refer to your cheat sheet for the appropriate
codes.

25

Image Effects
Resizing Images
Because we are so used to placing and resizing images in word processed documents using
the image tools and handle bars on the image this approach is often imitated in HTML.
Unfortunately, resizing an image visually does not equate to resizing it physically in HTML.
Even though you are asking the image to be displayed at a specific size, the physical image still
resides in your file structure and the entire image must be downloaded in order to view it. If you
resize the image to the actual display size using a graphics program, the image to be
downloaded before the HTML code presents it, will be much smaller.
When resizing an imagebe sure to keep the image ratio intact. Nothing looks more
unprofessional than an image which has been squashed.
Image Format
It is important that you use the correct image format when preparing images for the web. As this
course is not one on design we will stick to the following simple rule. If the image is cartoonlike
or requires transparency you should use a .gif. If the image is more photo like or has gradients
of colour, you should use a .jpeg.

26

Inserting Images
The terminology "inserting" an image is somewhat problematic. In reality you are telling the
webpage to display an image saved in your website at a specific location on the page. It should
be thought of as "displaying" an image instead.
Use the "img src" tag.
<img src="cow.jpg>
Depending on where it is saved in your file structure, the "path" to the image may look slightly
different. Further explanation is available in the File Management portion of this resource.
<img src="../images/animals/cow.jpg>
Note that images do NOT have a closing tag.

ASSIGNMENT
Save the following image to your g:drive (personal drive) in the labs folder within a
subfolder called graphics. You can download it from the ATutor course site. Create a
new html file and insert image within it using "relative" linking. Save the file and name
it imagetesting.htm

27

The Alt Tag


<img src="cow.jpg" alt="cow">
This will pop up the word cow when the mouse is hovered over the cow displayed on the web
page. Where this is useful is for those who turn images off in their browsers (there are still a lot
of people using dial up!) or for those who have vision problems and make use of text readers to
interpret their webpages for them.

ASSIGNMENT
Open the imagetesting.htm file and add alt text to the car photo. Save the file (using
the same file name) and preview it in a web browser. You'll note that when you hover
your mouse over the picture, the word(s) you used will appear.

28

The width and height tags


<img src="htmltemplate/graphics/photo2.png" width="200" height="133">

You can use these to change the size of the image being displayed on your
webpage; however, although it resizes the image VISUALLY it does not resize the
physical image. Use it to visually decide the size you will change your image to using
a graphics program.

The numbers are in pixels

If you wish to resize the image according to the display size of the window, you
can use percentages. <img src="htmltemplate/graphics/photo2.png" width="30%"
height="10%">

29

Alignment
The alignment of the image relative to the text can also be controlled using the align attribute.
<img src="cow.jpg" align="middle">
You can align "middle", "top", "bottom", "left", "right", "texttop", "absmiddle", "baseline", and
"absbottom".
What is frustrating is that only one line of text will be aligned in this way. Any text that wraps to
the next line will appear below the image. 2 solutions are available and will be covered in the
tables section and in the .css section.

ASSIGNMENT
Open the imagetesting.htm file and insert the following text AFTER the image. You
may cut and paste it to save time (this is available on the ATutor Website).
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ornare, ipsum et
aliquam iaculis, neque lacus cursus augue, vel lobortis enim odio non nunc. Nam mi
dolor, mollis nec, ultrices quis, rhoncus in, metus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Fusce a massa. Mauris
venenatis ante. Quisque lectus. Mauris interdum. Phasellus gravida. Aenean tempor
commodo felis. Aenean turpis lectus, laoreet non, euismod sed, dapibus a, est.
Maecenas fringilla venenatis ante. Mauris mollis felis et tellus. Quisque consectetuer
adipiscing dui. Nam interdum.
Next...top align the text. Save the file (using the same filename) and preview it in your
web browser. Note how the text is broken up.

30

Borders and Spacing


You can add a solid border to an image.
<img src="cow.jpg border="3">
To add space around the image use the hspace and vspace attributes.
<img src="cow.jpg" hspace="5" vspace="5">

ASSIGNMENT
Open the imagetesting.htm file. Put a border around the image (size of your choice)
and also spacing around the image (size of your choice).
Save the file.

Page Defaults
There are several attributes that you can set up for the entire page in order that you don't need
to type code over and over.
You can change the background colour of an entire page:
<body bgcolor="#000024">
OR You can tile an image filling the background.
<body background="../graphics/bgtile.gif">
The other item you can affect throughout the page is the "default" colour for text.
All text (non linked)

<body text="000234">

Linked Text

<body link="239344">

Visited Links

<body vlink="234884">

Active Links

<body alink="223344">

31

Adding the "Hyper"


The Hyper in Hypertext basically means the ability to link from one page or element to another.

ASSIGNMENT
As you read through each item in this section Adding the "Hyper", try each tag you
learn in a basic page and save your cumulative results on an html page called
hyper.htm.

32

File Management
In order for your linking to be most effective you must first have clear understanding of file
management.
If you think of your hard drive as a traditional filing cabinet, it is easy to see that you would use
folders to organize items. Although we sometimes just throw things into file cabinets, we always
regret it when it comes time to find them.
You should do the same with your electronic file keeping.
In this image, you can see several hard drives (C:, D:, and Q:)

Think of these three drives as three separate filing cabinets. At home your main drive is most
likely C: while at school it will be G:
You can see that once the Q: drive is open that there are several
folders sorting items within.
You can add subfolders, which then in turn have subfolders and
so on. For example, in the work folder, there is an adminsitration
folder which contains many other folders including one named
professionaldevelopment which again has more subfolders
located within.
It is within these folders that you can store actual files (documents,
images, music files, movies, spreadsheets, etc.)
It is important to name all folders and files properly. Call them

33

what they are. This makes finding them a lot easier and in the case of business, if you aren't
around one day and you are working on a collaborative project...anyone can make sense of
your file structure and find the information they require.
A file name is made up of two parts. The name you give it and then the three character file
extension (this is sometimes more than three). It is very important that you do not change the
file extension. This is what tells the computer which progrma to open files with. Here are some
examples of file extensions:
.exe - executable (a program)
.wpd - Word Perfect
.doc - Microsoft Word
.hml or .html - hypertext mark up

.pdf - Adobe Acrobat


.ppt - Microsoft PowerPoint
.jpg or .jpeg - jpeg image
.css - cascading style sheet

So if you are saving a Word Perfect document which is an essay on Shakespeare, you will more
than likely call it shakespearessay.wpd. Because many files eventually end up on the Internet,
it is good practice to avoid putting spaces between words in your file name.
Paths
Once you have stored your file in a folder you need to be able to tell the computer where to find
that file if you link to it. This is known as the file path. It is important to know how a path is
outlined in order to do proper linking in HTML.
The letter name of the drive is followed by a colon(:) and then immediately the first folder name
occurs. For each subsequent folder name a backslash(\) is inserted immediately before, until
you finally get to the actual file you wish to reference and you type in the filename and extension
for that.
Example:
q:\work\administration\professionaldevelopment\busdrivers\emailintroduction.ppt

34

How Does File Management Relate to a Website?


This example is from the Western School Board
Website. Each aspect of the site is organized into
folders and sub-folders. This not only makes it easy
to locate files, but it also makes it easy to delete an
entire topic within the website. So for instance, if the
animation topic were to become obsolete, it would be
fairly simple to select the animation folder and delete
it and everything stored within it. Or conversely, if one
was looking to update a page, it would be a simple
matter to find the specific page and then be able to
edit it.
Note too that all images (graphics) that are a part of
this project are specifically stored within the animation
folder in a graphics folder.
It is a good idea to have a main folder in your website
also called graphics in which you store images that
you use throughout the website such as icons,
mastheads, etc. You would not want to accidentally
erase these if they were stored in another folder.

When do you use "home" and when do you use "index" for your main page on your website? In
general, service providers accept both as a starting point. Traditionally, it seems, that this is a
split between Mac and PC users. Mac seem to use home and PC seem to use index. This is
similar to calling your main image/graphic folder images or graphics.

35

Transferring Files to a Web Server


Although your files are saved "locally" on your hard drive, you need to be able to copy them to a
web server in order for anyone to have access to them. They need to be in the same folders
and have the same names in order for your website to work.
By using an FTP - file transfer program - you can transfer your files from your home computer
over the internet to a remote computer used as a web server. In order to do this you will need
the server information to connect to it, a user name and a password. Once you enter this
information in to your FTP client, you'll see the webserver appear much the same as a hard
drive. Simply use the FTP program to move the files and folders in your local drive to the
remove drive.
In the future, when updating your "remote" copy of the website, you'll need to be sure to upload
any referenced media such as pictures into the correct folder along with the HTML page.

36

Linking Text
Page Links
<a href=http://www.edu.pe.ca> Page Link</a>
By page link this means you can link to any document viewable on the Internet or by the
individual who may have software on their computer that will read a specific file type. For
example, you may link to a .pdf, another .htm page quite easily. You may also link to a .wpd
(word perfect file), a .ppt (powerpoint file) and it will open as long as the individual has a viewer
or the program installed on their computer.
The page link can be a direct or relative link (see next section).
Target Your Links
A system of specifying where you would like your window to open is somewhat obsolete. It
made more sense when it was the norm to use Frames to design a webpage. (see frames
section)
However, the one target that is still useful is "_blank". This will open the link in a new window.
<a href=http://www.edu.pe.ca target="_blank"> Page Link</a>
Email Links
<a href=mailto:> Email Link</a>
This type of link will start up the individual's email program on their computer and address an
email to that address.
Anchors
<a name=name> Anchor</a> This is the anchor
<a href=#name> Link to Anchor</a> This is the link to the anchor.
This type of link creates spots in longer pages where the link can "jump" to.

37

Relative or Direct?
Creating links to other resources is a fairly simple process; however, it is beneficial to know
when to use DIRECT links vs INDIRECT links.
Direct links are links which specifically spell out a location. For example: <a
href="http://www.edu.pe.ca/wsb/westindex.htm"></a> specifically tells your computer to look on
the internet for that specific address. If you are linking to that page from outside of that site (say
for example, Three Oaks Senior High wanted to link to the WSB website), they would use this
specific link.
If, on the other hand, it was the WSB webmaster linking to this page, he or she would
use relative links. It is important to keep your code as clean and limited as possible. In the end,
if you create proper relative linking, you will be able to move your pages within your web
structure without breaking any links because they are all relative.
So the following coding should be used
Code Explanation
Example
- no code returns you to a page located
<a href="contacts.htm></a>
within the same folder
- the / returns the link to the root of the
webpage and then into the folder
<a href="/materials/forms/forms.htm></a>
/
indicated
<img src="/graphics/logo.png>
- continue for each folder
- means to go back one folder (for each
<a href="../courses/cmp521/index.htm></a>
..
instance of ../) and then look for the file
<img src="../../2008/courseindex.htm></a>
located within
What that would look like from a page within the wsb webpage would be
<a href="index.htm"></a>

38

Linking Images
Images may also be used as links.
Just as with text, you will insert the linking tags on either side of the image.
<a href="http://www.edu.pe.ca/> <img src="../graphics/doeicon.gif" alt="PEI Department of
Education"></a>
There are several considerations for linking using images. If you are using an icon as part of
your navigation, ensure you include the alt text information so that individuals using a text
reader don't miss out on that info.

If you are linking to a web page not in your website, consider having that link "open in a new
window" (use the target attribute and select "_blank" -- it is important you include the
underscore)
<a href="http://www.edu.pe.ca/> <img src="../graphics/doeicon.gif" alt="PEI Department of
Education" target="_blank"></a>

39

Image Maps
Image maps used to be used to provide a graphical interface by indicating points on the image
which would be "hot spots".
This type of interface has largely been replaced by FLASH and will not be covered in this
course.
If you are looking for more information on Image Maps the following tutorial explains how to
create one: http://www.elated.com/articles/creating-image-maps/

40

Embedding Other Media


You can include media such as audio and video within your webpage. It is important to
remember that the user needs to have the "player" for that media installed in their web browser
to view or hear the media. These are often called plug-ins.
In addition, the question remains...do you want to "force" the viewer to have to download the
media OR do you want to provide them with a choice. Not everyone has high speed internet
and there are accessibility issues to consider. However, for our purposes, we will be looking at
embedding as opposed to providing a link to the resource.
If you wish to embed media you have created, it needs to be saved within the file structure of
your webpage.
Audio
Use the embed code.
<embed src="audio/podcast32.mp3" autostart="false" loop"false" height="40" width="100">
Attributes explained:
autostart="..." - can be set to true or false. When set to false, the song will not play until the
user initiates it. When set to true, the song will play if the user has the plug-in.
loop="..." - True will loop will play the song over and over, while false will stop it at one playing.
hidden="..." - True will display control bar for plug in, false will make it disappear.
Video
Video also uses the embed tag AND the same attributes. Ensure that you do not use the
hidden attribute as it will hide the video and control bar.
Ensure as well, that the height and width of the video is exactly the same size as the video is
meant to be displayed.

41

Third Party App


There are many third party applications out there which allow you to embed their application into
your webpage. As such, they often give precise and easy to follow instructions on how to do
this.
Examples:

Google Calendar embedded into WSB website


o

The Calendar account gives a small amount of code to paste into the
HTML document from it's settings page.

TeacherTube Video embedded into a blog


o

TeacherTube gives the code to be pasted into the blog beside each video.

In short, each service writes the code for you even though the application is still hosted on their
site. Often the code involves a combination of referencing the information by a web address
and also the display size and plug in required.

42

Tables
The invention of WYSIWIG editors has meant that some items which were extremely
cumbersome and confusing with code are now easily accomplished. One of the most important
ones is the table. It is important to understand the HTML coding that creates a table so that you
can troubleshoot any issues that come up using a WYSIWIG editor.

ASSIGNMENT
As you read through each item in this section on tables, try each tag you learn in a
basic page and save your cumulative results on an html page called tables.htm.

43

Table Basics
To create a table you must use the code <table></table>. These tags are the container for all
column and row tags.
Each row is designated with <tr></tr> tags.
Each cell in the table is designated with <td></td>
Soto create a table with three columns and three rows
<table>
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>
</table>
Table Borders
The table does not display lines between each cell unless you apply the border code to the
table. The number you include is the number of pixels wide you wish to make the table lines.
<table border="2"></table>
Table Headers
To create table headers use the codes <th></th> in place of the cell codes (<td></td>). This will
make a cell but with bolded print which is also centred.

Recreate the above in an HTML Table. The following code shows you how to do it, but
try it on your own first:

44

You could combine the <td> and <th> codes to accomplish something similar to the following:
Mon
9:00

Tues

Weds

Dr's Appt

Thurs

Fri
Groceries

10:00
11:00

Lunch with
Bob

Cell Specifics
In general, the cells which make up a table are fairly close. You can change the cell spacing
and/or the cell padding to accomplish a different look. This is applied to the entire table and is
included in the table coding.
Cellspacing (the space between cells)
<table border="1" cellspacing="10">

Cellpadding (the space between the cell wall


and the content of that cell)
<table border="1" cellpadding="10">

45

Cell Spanning

Just as with a word processing document, you can create a table with one cell "spanning" the
top etc.
The tag is colspan. Since the below table has 3 columns, the colspan="3".
<table border="1" cellpadding="10">
<tr> <td colspan="3"> Our Products</td> </tr>
<tr> <th>Description</th> <th>Product Number</th> <th>Pricing</th> </tr>
<tr> <td>Orange Survival Suits</td> <td>A35BB27</td> <td>$300.00</td> </tr>
<tr> <td>Orange Floats</td> <td>O443362</td> <td>$25.00</td> </tr>
<tr> <td>Yellow Life Jackets</td> <td>F332B82</td> <td>$75.00</td> </tr>
</table>
You may also use it in combination with the <th> tag. Here is an example using that:

To combine the cells horizonally, you would us the tag rowspan.

The first row would be:


<table border="1" cellpadding="10">
<tr> <th rowspan="5">
<p>O<br>U<br>R</p><p>P<br>R<br>O
<br>D<br>U<br>C<br>T<br>S</p>
</th> <th>Description</th>
<th>Product Number</th> <th>Pricing</th>
</tr>

46

Table Borders Indepth


To add a border to a table, we have already covered the border attribute which determines the
size of the outside border. There are two more items which can affect the lines delineating the
inside and outside of a table.
Use the attribute "frame" to determine which outside borders are shown.
Use the attribute "rules" to determine which inside borders are shown.
These attributes are applied to the <table> tag.
<table border="1" rules="none" frame="box">

To remove the outside frame the attribute would read frame="void"


To remove the left and right outside frame the attribute would read frame="hsides"
To remove the top and bottom outside frame the attribute would read frame="vsides"
To include only row lines the rules attribute would read rules="rows"
To include only column lines the rules attribute would read rules="cols"
To change the table border colour include the attribute tableborder="colour"
Table Cell Alignment
Adding the tag "align" to <td> tags allows you to individually align the content of each cell.
<table>
<tr><td align="right"> </td> <td align="left"></td> <td align="center"></td></tr>
</table>
To align content in a cell vertically, use "valign".
<table>
<tr> <td valign="top"></td><td valign="middle"></td><td valign="bottom"></td></tr>
</table>

47

Used to Layout
One of the most difficult things to do in HTML is to precisely place information on the page as
the information naturally follows a hierarchical flow and results in a linear presentation. An easy
way to create containers using a table to provide exact placement. If you make the table
border="0", the table will be invisible in the browser.

This will create a table with one cell at the top. Perfect for a masthead image. Two cells in the
middle a smaller one on the right hand side perfect for navigation menu and content to be
included in the larger one and finally a single cell at the bottom which can contain all footer
information.
By using percentages, the table will fill the browser window. If you wish to constrain the table to
a specific size you can use pixels.
Using "nested tables" will allow you to lay out information within the table cells for the main
layout.
So if you wanted to put in a picture but have the text appear to flow around it, you could put in a
two cell table in the main content window. Remember that table cells automatically center align,
so you would have to set the valign to "top" to get the information to load from the top of the
page.

48

49

Hyper/Table Assignment

ASSIGNMENT
Create a new folder in your labs folder called "hyper". You are going to create a mini-website
featuring several hyperlinked items using a combination of relative and direct linking.
Pick a theme. eg. hockey team, a pet, a band, a book, etc
You should first collect or write down the following information:
1. a picture
2. a few links to other sites with the same theme
3. an audio file (you can download a free wav sound or create your own)
4. a video file from TeacherTube
You should decide on your own file names and file structure; however, it should make sense to
someone viewing it for the first time.
Create the following:

50

51

Page Information
There is a lot of information that is hidden to the viewer included in the <head></head> tags.
Meta data is used by search engines to display information about your webpage.
Document Type Definition
Defines the version of HTML implemented and is used by browsers and markup validators to
process the web page.
Title
The title tag is used to display a page title in the browser tab as well as in the listing for pages
when you reverse or click on back in the browser window. It is also what is entered in the
bookmark list when the user adds the page to their favorites/bookmarks. Depending on a search
engine, this title will also display.
Base
Establishes a relative URL to resources used on the webpage.
Link
Defines a relationship between the current page and another page or resource.

Meta
Description
The description attribute will return a text description of your webpage (depending on the search
engine).
<meta name="description" content="add description for search engine here.">
Keywords
The keywords attribute will aid the search engine in matching keywords you believe your
intended audience might use to find your website.
<meta name="keywords" content="fishing, floats, deals, sale, orange">

52

Robots
This tag prevents any robots from indexing your page in a search engine.
<meta name="robots" content="no-index:>
Style and Script Resources
Any style resources and script resources are also inserted in the header. These will be
determined by items you wish to embed such as css styles (this will be covered in the next
section) and including an element within your webpage such as a javascript applet.

ASSIGNMENT
Go to three Canadian webpages. Select from different industries for each one. For instance,
you might choose an automobile manufacturer, a hotel chain, a newspaper, a television station,
a political party, etc.

Right click on the page and select view source to see the code that
makes up the page.
Create

chart

in

word

processing

document

called

"keywordcomparison". Include the name of the website and the


keywords chosen.

Compare your findings with a classmates.

Discuss any similarities and differences in the same industry. Write


down any keywords you believe would help the web site.
Next:
Brainstorm keywords for a ficticious company that sells one product
(eg PEI potatos). List these on your sheet.

53

Search Engines
How do search engines actually work? How do they rank your site against a similar site? Do
keywords determine everything? How do you get a better result in the listing?
Meta tags assist search engine crawlers in classifying web page content according to a
description provided by the web site author. The relevance of this content for particular
searches is provided through the use of keywords. Keywords provide words that are used in
the body of the web page as well as stemming truncation, synonyms, and alternative spellings
(eg. golf, golfing, golfer). The objective of selecting precise keywords is to improve ranking or
the order in which the web page is listed in the search engine results.
Search engines use multiple methods to determine ranking such as paid listings, traffice count,
meta tag information, user satisfaction surveys, link evaluation etc. Google claims to use an
algorithm of 200 factors to determine relevance an ranking order.

ASSIGNMENT
Create a chart which compares five major search engines. Save as
searchenginecomparison (in the format your teacher assigns) in your labs folder. A
good starting point for your research is:
http://searchenginewatch.com/2167891#robots.txt.

54

Other
There are many items, tasks and interactivities which HTML was used in the past do
accomplish. We have already covered the relative obsolesence of the image map.
Conversely, there are HTML codes which make more sense when learned in concert with the
items they interact with.

ASSIGNMENT
Research a listing of HTML tags or attributes that are no longer used or that will soon
be replaced. Be prepared to share three of these with your classmates.

55

Forms
Forms are more complex items which might be used with a database in the backend. For this
reason, they will not be covered in this unit and will be visited in CMP 621.

Frames
Frames are for all intents and purposes obsolete.
If you are interested in learning about frames, you can check out an online tutorial.
The reason they have become obsolete is because they were very difficult to manage. Each
page had to be told where to open within the frameset and the coding was a nightmare. The
benefit of using frames was to have a consistent navigation in one of the frames which did not
need to be loaded each time. Today, menus are easily accomplished through a variety of
means (flash, javascript, etc) and copied into a template page.

56

Troubleshooting Code

ASSIGNMENT
Paste the following code into notepad and save it as troubleshooting.htm. CORRECT the code
and save. It should look like the image below once fixed; however, there are at least 10 errors
in coding. It may display correctly without all the code being correct; however, the code should
be right and that is what is being marked!
<html>
<head>
<title>Troubleshooting Test Page</title><body bgcolor="#FF0000">
<center><font face="comic sans ms">
<table width="750" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr bgcolor="#CCCCCC">
<td colspan="2"><h1>HTML Tutorial Website <h1></td>
<tr>
<td width="158" valign="top" bgcolor="#CCCCCC"><font size="2">
<p>Home</p>
Coding</p>
<ul>
<li><a href="http://www.abcdyadayada.com/tags">ta</a>gs</li>
<li><a href="http://www.abcdyadayada.com/syntax">syntax</a></li>
</ul>
<p>Examples
<ol>
<li><a href="http://www.abcdyadayada.com/merchant" target="_blank">Merchant
Website</a></li>
<li><a href="http://www.abcdyadayada.com/school" target="_blank">School Website</a>
<li><a href="http://www.abcdyadayada.com/travel" target="_blank">Travel Website</a></li>
</ol></font></td>
<td width="592" valign="to">
<br><p>This is where the <u>welcome information</u> would go. </p></td>
</tr>
<tr>
<td colspan="2"><font size="2">
<center>Last Updated: 18 November 2008
</center></font></td>
</tr>
</table>
</font>
</center>
</body>

57

58

Major Assignment
Create the following in HTML (note there are 5 pages). As part of your planning, recreate the
following on paper indicating where the layout tables would be, the types of headers, colour
choices, etc. Submit this paper copy to your teacher.

59

Rubric
0

Planning

Paper copy of planned layout


was not submitted to instructor.

Paper copy of planned layout


was submitted to instructor but
was missing detailed
information.

Paper copy with detailed


information was submitted to
instructor.

Accessibility

Accessibility considerations
were not taken into account.

Some accessibility
considerations were utlized

This web site passes


Accessbility testing.

Table (Layout)

A Table was NOT used to lay


out the page.

A Table was used to lay out the


page.

Table (Content)

Tables were not used within the More tables could have been
main layout table.
used to nest information inside
the main layout table.

Tables were used to nest


information inside the main
layout table.

Images

Images were not used.

Images were used, but were not Images were used


resized to the appropriate
appropriately.
display size or were not linked
to appropriately.

Linking (Navigation)

Links were coded


inappropriately.

Links were coded


inappropriately but did not open
in a new window when
external...or were coded
appropriately but did not open in
a new window when external.

Linking (Email)

email link was not included

Links were coded appropriately


(in site links were relative,
external links were direct and
opened in a new window)

email link was included

60

5 Pages

Only one page was created.

Several pages were created


and/or fully developed.

All pages were created and fully


developed.

Files and File Structure

File names did not make sense, A mixture of appropriate file


File structure was
folder names did not make
structure with confusing naming understandable and file names
sense, folders did not exist
or vice versa.
made sense.

Neatness of Coding

Coding was very difficult to


read.

Coding was fairly neat and


visually sectioned off.

Coding was extremely neat and


sectioned off.

Consistency

Pages were all dissimilar.

Pages were fairly similar. Had


commonalities in navigation,
colour, font, etc.

Pages were obviously all part of


the site as they looked alike.

61

Resources
Looking for that nifty Lorem Ipsum text to copy rather than to type out? Check out the Lorem
Ipsum Generator (http://www.lipsum.com/).
You can use the following images...or be orignal and create your own! Go to the Atutor Course
site and download them.

62

Generators and Testers

Lorem Ipsum Generator (http://www.lipsum.com/)

WSB Code Tester


(http://www.edu.pe.ca/wsb/departments/technology/topics/webdesign/html/test
er.htm)

Tutorial Sites

HTML Tutorial Sites Barebones Guide


(http://werbach.com/barebones/barebones.html)

HTML Code Tutorial (http://www.htmlcodetutorial.com/)

63

Assignment Checklist
The following assignments should be saved in your labs folder on your personal drive (G:
drive). They are found in the Standardization and HTML section of this course.

accesibilityshow
index.htm
beliefs.htm
beliefsparas.htm
beliefsheading.htm
beliefsrule.htm
lists.htm
characters.htm
ourbeliefsfinal.htm
imagetesting.htm
tables.htm
hyper.htm
hyperassignment
keywordcomparison
searchenginecomparison
troubleshootingcode
major assignment

64

Standardization/HTML Lab Marking Scheme

ASSIGNMENT

MARK

accesibilityshow
index.htm
beliefs.htm
beliefspara.htm
beliefsheading.htm

/20
/3
/1
/5
/2

beliefsrule.htm
lists.htm
characters.htm
ourbeliefsfinal.htm

/1
/9 +2
/7
/19

characters.htm
imagetesting.htm

/13
/5

hyper.htm
tables.htm
hyperassignment

/5
/5
/12

keywordcomparison

/10

searchenginecomparison
troubleshooting code
major assignment

/10
/10

NOTES
1 mark for pt and 1 mark for evidence
all 3 items included in proper order
text between body codes
5 paras incl heading
remove paragraph tag from our beliefs and add
heading tag
add horizontal rule
3 entries + 3 types of lists + bonus for nested list
1 pt per character
colours x5, bold x4, underlined x4, italicized x4,
2xfonts
1 alt tag, 1 text top aligned, 1 relative link, 1
border, 1 spacing
evidence that labs were tried and saved
evidence that labs were tried and saved
1 mark for header, 2 marks for table (span and
layout), 1 mark for email link, 1 mark for lists, 2
marks for links opening in a new window, 2
marks for embedded media, 1 mark for image
inserted as a relative link, 2 marks for audio
inserted with appropriate controls
5 marks for comparison, 5 marks for
brainstormed keywords
2 pts per search engine
10 errors in coding!
-- see rubric

65

CSS CODING

66

CSS
CSS is an acronym which stands for Cascading Style Sheets.
A style may be applied to an existing HTML tag or can be used to create the equivalent of one.
This is called a style.
Why use CSS?

an alternative to programs which use templates

give a consistent look and feel to page elements

more control over layout

should decrease page load time

one file will change the look of your entire website

ASSIGNMENT
Create a subfolder called "css" in your "labs" folder on your personal (g:) drive and
copy & paste the following into notepad (you can access this from the course site in
ATutor). Save as practice.htm. Create a sub-folder in the "css" folder called images.
Scroll down past the HTML code below and right click on the image and save it in the
graphics folder (you can access this from the course site in ATutor).
--------------------------------------------------------------------------------<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>Elementary School</p>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="schoolinfo/schoolinfo.htm">School Information</a></li>

67

<li><a href="schoolinfo/calendar.htm">Calendar</a></li>
<li><a href="academics/academics.htm">Academics</a></li>
<li><a href="extracurricular/extracurricularactivities.htm">Extracurricular
Activities</a></li>
<li><a href="students/students.htm">For Students</a></li>
<li><a href="parents/parents.htm">For Parents</a></li>
<li><a href="staff/staff.htm">For Staff</a></li>
<li><a href="staff/schooldevelopment.htm">School Development</a></li>
<li><a href="search/demosearch.htm">Search</a></li>
</ul>
<h1 align="left"> Welcome to our school </h1>
<p align="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
<img border="0" src="images/school.png" width="300" height="225">
</p>
<h1 align="left">School News</h1>
<p align="left">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.</p>
<h1>Upcoming Events</h1>
<ul>
<li>Dec 8 ~ Christmast Concert</li>
<li>Dec 19th ~ last day of classes for 2008</li>
<li>Jan 5th ~ first day of classes for 2009</li>
</ul>
<p align=center> Name of Elementary | Contact | Site Map |Last Updated:
12/12/2007 </p>
</body>

68

</html>

69

Applying CSS
There are three ways in which to apply css code to an HTML doc:
1. Inline
2. Internal
3. External
Inline
The style is used with a single instance of an HTML tag. In reality, it would make much more
sense to use HTML to change only one specific tag.

<html>
<head>
<title>Inline Style Page Example</title>
</head>
<body style="background-color:#99FFCC;">
<p>This is an example where the background colour of this particular webpage would
be light blue</p>
</body>
</html>

Internal
Styles are defined in the head section of an HTML document. These styles only affect the
instances included in the particular page. It is more common for people to use External style
sheets.

<html>
<head>
<title>Internal Style Page Example</title>

70

<style type="text/css">
body{background-color:#99FFCC;}
</style>
</head>
<body>
<p>This is an example where the background colour of this particular webpage would
be light blue</p>
</body>
</html>

External
Styles are defined in a separate document called a "style sheet". This sheet may be referenced
from many HTML documents. As such, each time the styles are changed within the sheet the
"look" is reflected in HTML pages referencing the sheet.

<html>
<head>
<title>External Style Page Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This is an example where the background colour of this particular webpage would
be light blue</p>
</body>
</html>

71

The style.css sheet reads as follows:


body {background-color:#99FFCC;}

72

Cascading
Different style sheets will overwrite (cascade) similar styles:

inline overwrites internal

internal overwrites external

external overwrites browser default

ASSIGNMENT
Open the practice.htm document in notepad. Although it hasn't yet been created, you
need to create a link to an external style sheet called styles.css in the same directory
as the practice.htm document.

73

Coding Syntax

Examples:
p {text-align:center; color=green;}
- more than one delcaration may be referred to in a selector
- each declaration must be seaprated by a semi-colon (;)
h1, h2, h3 {color:red;}
- you can apply the same property and value to vaious selectors as in the example above

74

Selectors
There are three types of selectors:

tag selectors

ID selectors

Class selectors

Tag Selectors
Tag selectors are those which change already in existence HTML tags.
p{
background-color: red;
}
Class Selectors
Class selectors are essentially a way in which to style an element which you name. For
example, you might wish to create a type of text box for news stories on a webpage to be
reused many times, or a way in which to wrap text around an image. The point is that a class
selector can be used many times.
#leftcontainer{
background:url(images/template/shadow_left.gif) repeat-y right top;
width:419px;
float:left;
color:#585858;
font:11px Tahoma, serif;
height: 466px;
overflow: auto;
}
ID Selectors
An ID selector is exactly like a class selector except that it can only be used ONCE in a page.

75

Using Selectors
To use selectors which are different from the HTML Tags, you will need to add these in in a
similar way to HTML tags.
To do this you use SPAN and the term class or id depending on what kind of selector it is.
<span class="header">Elementary School</span>
<span id="specialparagraph">Upcoming Dates:</span>
If your selector is already an HTML tag, you would simply use it as you already have.
<p>Ipsum Lorem</p>

76

Properties
There are many different properties and values that can be applied to selectors. This section
will examine them in some detail. As always, this is not a final list but a good cross reference of
the variety that are available.

77

Text
There are many ways in which to change the value of properties that relate to text.
property:
font-family:

font-size;

font-style:

value;
Notes:
Verdana, Arial,
Helvetica, sansserif;
12px;
There are a variety of measurements that can be
small;
applied to fonts. The most common include pixels
(px), and the default browser sizes such as small,
medium, etc.
italic;
normal;
oblique;

line-height:

30px;
normal;

text-decoration:

underline;
overline;
line-through;
blink;
none;

font-weight:

text-variant:
text-transform:

color:

bold;
bolder;
lighter;
normal;
small-caps;
normal;
capitalize;
uppercase;
lowercase;
none;
#99CCFF;
red;

You may also choose 100, 200, 300, 400, 500,


600, 700, 800, or 900

78

ASSIGNMENT
Open notepad. Save the empty file as styles.css (in your css folder).
Open a webbrowser and navigate to and open the practice.htm file.
Return to notepad and type the following:

Notes
1. If you type in /**A Description**/ it will help you as you develop sections. In the
end, your styles.css file will have several sections and it makes sense to name them
what they are. In this case, we are starting off with changing a normal HTML code
(body), so you are going to call this section "HTML Styles".
2. Do not attempt to change the colour of the text (eg body is pink) this is just to help
you see the difference between the style, selector and properties.
Explanation
What you are doing is changing the HTML code body to result in the following: All text
(unless over-ridden by another style) will be 12px Arial (or Helvetica or sans-serif if the
computer does not have that font) and it will be a darker grey.
Save the styles.css file. Because you are referring to this file in your practice.htm
page, you do not have to do anything to that page. Refresh it in the browser and see
what happens to the text!
Continue by creating a new style for the <h1> Heading 1 code:

79

In this case, there is a PROPERTY which is redundant in the above example and
really not required. Remove it and only add the 3 properties required to change the
look of a header.
Save the .css file and refresh your practice.htm file to see what has happened to any
text which has the <h1></h1> tags around it.

80

Background
In the HTML section, backgrounds were applied to two items...the entire page or to a cell in a
table. The Background of any css selector can be changed in css.
property:
backgroundcolor:
backroundimage:
backgroundrepeat:

backgroundattachment:
backgroundposition:

value;
Notes:
#99FFCC;
red;
url(../images/leaves.jpg);
repeat;
repeat-y;
repeat-x;
no-repeat;
scroll;
fixed;

tiles the image


tiles the image vertically
tiles the image horizontally
displays the image only once
selects whether the background image
scrolls on a webpage or not

top left;
top center;
top right;
center left;
center top;
center right;
bottom left;
bottom center;
bottom right;
Xpx Ypx;
X% Y%;

ASSIGNMENT
Open notepad and the styles.css file.
Open a web browser and navigate to and open the practice.htm file.

81

In the last variation of the styles.css file, the HTML code for <h1> had a style applied
to it where the font was a little bigger than the default font, bolded and a turned a
green colour.
Change the background of the h1 tag by using the "background-color" property. Make
the colour be: #bce27f.
Save the .css file and preview the practice.htm file in your web brower. Welcome to
our school should now be in darker green with a lime green background which
reaches across the page from left to right.

82

Block
property:
word-spacing

value;
3px;

letter-spacing

5px;

vertical-align

baseline;

Notes:
- increases or decreases the whitespace
between words
- increases or decreases the whitespace
between characters
- sets the vertical alignment of an element

bottom;
inherit;
middle;
sub;
super;
text-bottom;
text-top;
top;
text-align

left;

- aligns the text within an element

right;
center;
justify;
text-indent
white-space

display

15px;
normal;
pre;
nowrap;
none;

- indents the first line of text in an element


- how the white-space is handled within an
element
- determines how and if an element is
displayed

inline;
block;
list-item;
run-in;
compact;
marker;
table;
inline-table;

83

table-row-group;
table-header-group;
table-footer-group;
table-row;
table-column-group;
table-column;
table-cell;
table-caption;

ASSIGNMENT
Open notepad and the styles.css file. Change the letter spacing of the h1 tag to -3px.
Save and preview the change to practice.htm in your web browser. Note that word
spacing is not observed...change the word spacing to 3px.
Next, create a new section header. Remember this is not code, but a note to
yourself. You can use /** ending with **/ to leave notes.
You are going to create your own selector called .newspara (short in this case for a
"news paragraph" style). This will indent the text 50px for any text you add this new
selector to.

Save style.css.
---------Because this is a new style (a class selector) and not a tag (HTML) selector it will not

84

affect any item within your HTML file unless directly coded in. Note how it is coded in
below. Add this class to the paragraph following "Welcome to our school" and also
"School News".

Rather than using HTML code to align these paragraphs to the left...this information
can be incorporated into the stylesheet as well. That way, if in the future you wish to
differently align all news paragraphs you can quite easily.

85

Box
Box properties are extremely useful in css. This area is what allows you to specifically decide
how to parcel each item on the page. Later on, when we look at combining this with positioning
you will see how placing boxes precisely on a page will allow you to accomplish not only what
you were able to in HTML with tables, but you can go further with this in that you can layer
boxes amongst other things.
property:
width:

height:

padding:

value;
150px;
30%;
auto;
150px;
30%;
auto;
10px;
auto;

Notes:

the spacing between the contents of the


box and the outside perimeter of the box

padding-left:
padding-right:
padding-top:
padding-bottom:

margin:

10px;

margin-top:

auto;

determines the space around an element

margin-bottom:
margin-left:
margin-right:
float:

right;
left;
none;

clear:

right;
left;
both;
none;

determines where content (image or text)


appears when included in a parent
element (these are called "floating
elements")
sets the sides of an element where other
floating elements are not allowed

86

ASSIGNMENT
Open your styles.css file and insert the following in the /**Class Selectors**/ section:

Save the file.


Open your practice.htm file. Find the text where updates are listed and add the class
as highlighted below. Notice that you place the opening tag (in this case span class)
at the beginning and end of the section you wish to affect just like with HTML.

Save and preview in your web browser.


----- let's change it up a little bit more...add the background-colour to the .updates
style.

87

Div vs Span

ASSIGNMENT
Normally, creating the layout of a page should be done first; however, because you
are learning different aspects of .css which are related, this is where we will
accomplish the layout of the html page.
So...as we are working on creating a page which will look something like the below
page, the following "boxes" have been drawn to show you what we are working on.
Each box we are going to create is named and outlined as well as one big container
for the entire page is indicated by arrows.

88

So...with keeping organization in mind in your styles.css page create a new header for
the Class Selectors you are going to create to accomplish the layout. Creating a
container to hold everything will accomplish what you did in the HTML section with the
main table.

The .header style (which we will do more with in the future) basically replaces the top
cell of the table.

The following 2 classes -- sidebarup and sidebardown create the equivalent of two
cells which we will ensure make up the left hand isde of the page.

89

The .mainbox class creates a container which can mimic the main cell of the table
created in HTML. There are some interesting features here which we will further
exploit in a few lessons. The footer replaces the bottom cell of the table. Again...we
will be adding to this soon.

Save your styles.css file.

Obviously, these styles will not yet affect any content on your webpage as they have not been
coded in to the HTML document.
So...because you are inserting totally NEW codes this is an appropriate time to talk about the
"div" and "span" code. In order to insert these codes you will either use:
<div class="nameofstyle"></div>
OR
<span class="nameofstyle"></span>

90

So when do you use div and when do you use span?


In short, div is used for block elements and span is used for inline elements. Block elements
are items which stand on their own on a page and take up the horizontal space on either side of
it, where inline elements are included in the line or flow of the page. Think of a block element as
being similar to the paragraph in HTML (except it can contain more than just text) and the inline
element would be similar to a font or link element where simply some text is changed.

ASSIGNMENT
We have already used span to affect the .updates information; in the case of all of the
above, you should use div as they are blocks that you are delineating around the
page.
Open your practice.htm file and insert the styles around the appropriate content. It will
not yet look "perfect", but items will begin to fall into place.
It should look as below:

91

Placement in Code
Obviously, it still matters which order you place your styles in...especially when using block
elements. The following code is actually placed in your html document AFTER the "main"
section of code.

ASSIGNMENT
Copy and past the "sidebardown" section of the practice.htm document to above the
"main" section. Save and preview.

The sidebardown should now rest directly below sidebarup.

92

Next add the following to your HTML section. This will make the image move to the
right hand side of the element it is contained within. See how this can replace tables!

93

Border
property:
value;
border:
thin
#000000;
none
border-right:
medium
border-left:
dotted thick
border-top:
5px
border-bottom: dashed
solid

Notes:
- combine the three values into one, for
example:
border-right: thin dashed #FF0000;

double
groove
ridge
inset
outset

ASSIGNMENT
Open your styles.css sheet. Go to your .footer style and give it a 1px top border which
is solid and the colour #668e39.
Save and preview the practice.htm file in your web browser.

94

List
property:
list-style-type:

value;
disc;

Notes:
without specifying the type -- the default is
circles

circle;
square;
decimal;
lower-roman;
upper-roman;
lower-alpha;
upper-alpha;
none;
list-styleposition:

inside;
outside;

- outside creates a bullet which resides on


the left hand side of the list separately
- inside creates an indented bullet

list-style-image: url(direct or indirect link); - you can create your own graphical bullet
and link to it
In our practice page, there are two lists. One makes up the menu in sidebarup and the other
lists the upcoming events in the sidebardown. We are actually going to replace the list in
sidebarup in the near future; however, see how it affects BOTH lists.

ASSIGNMENT
In the appropriate section in your styles.css sheet, create a new definition for <ul>
which makes use of squares inside the list.
Save styles.css and preview your practice.htm page. You'll note that both the menu
and Upcoming Events lists now have squares which are indented. We are actually
going to treat the menu in a totally separate way next so that this "look" does not apply
to that list.

95

96

Positioning
The position property defines where an element will be placed on a page, either in relation to
the upper left hand corner of the screen or through it's placement within the code.
property:
type:

value;

Notes:

absolute;

- absolute allows you to place a "layer"

relative;

anywhere on the page (therefore it does

static;

not matter where you place this in the flow


of the HTML)
- relative allows you to place a "layer"
relative to it's position within the HTML
- static is basically what occurs with simple
HTML (therefore do not use it)

visibility:

visible;
hidden;
inherit;

z-index:

auto;
3 px; (a value)

- visible - normally layers are visible by


default
- hidden - you can choose to hide layers
only to reveal them in concert with another
action (such as mousing over an image)
- inherit - this is more advanced than what
we will do in this course -- but feel free to
do some research!
- when using layers it is important to
determine how they "stack" on the page if
they are overlapping
- the z-index determines the order

overflow:

visible;
hidden;
scroll;

- if the content is larger than the height


and width of the layer, you can determine
whether you wish it to be visible (thus
overriding the height and width, hidden, or
a scroll bar added

auto;
width:
height:

auto;
750px; (a value)
auto;

97

500px; (a value)

top:

auto;

right:

20px; (a value)

bottom:

This is the placement relative to the upper


left hand corner of the screen.
Remember...not everyone has the same
size screen!!

left:
clip:

rect
(top,right,bottom,left);

- eg. rect (1px,33px,1px,5px)


- this property is fairly useless and
reminds one of the discussion about
images -- resize or crop them to their
actual display size so that that is all the
user has to download
- clipping a layer allows you to determine
what portion of a layer is displayed

98

Cleaning Up
Now that you have a fairly good overview of what .css can do. Here are a couple more things
where you may wish to use non-HTML elements to create or layout content on your webpage.

ASSIGNMENT
Replace the menu list by removing the HTML list tags in your practice.htm page.
Next go to the styles.css page and create a new section called /**Menu**/
First download and save this green rectangle ( ) in your graphics folder and then
create the following:

What this is, is a style called menu links that you can apply to the entire menu. The

99

a:links, a:visited: and a:hover are the ways in which you wish all links specifically
found within the menulinks style to be treated. This makes a much more interesting
navigation effect than a simply list.
FURTHERMORE, imagine inserting background images to make the links look like
buttons...

ASSIGNMENT
Save the following image into your graphics folder and incorporate it as a background
in your header style. This can be attained from the Atutor Course site.

ASSIGNMENT
Finally...give the page a <title></title> such as "Elementary School"
AND
Center the page.

100

and the end result should be very similar to...

101

Major Assignment
Recreate your HTML project in a new folder using .css to replace/tweak HTML tags, to create
your own new styles, update your navigation menu, as well as to lay out the page.
Test your page in an online .css validator!

102

Assignment Listing
In the css folder you should have the following files:

practice.htm

styles.css

css major project

103

css Marking Scheme


Code Changes to Practice.htm
-

add link to external style sheet


add class=newspara to main body content paragraph tags
removed alignment from main body content paragraph tags
add .updates style to upcoming events text
add layout styles around appropriate content (use div as they are BLOCK elements)
move .sidebardown block to BEFORE the .mainbox section
remove list from menu navigation
add #menulinks to navigation
add bg image to .header
give page title
center page on screen.

Code Changes to styles.css


-

Create section /**HTML STYLES**/


body
o as is
h1
o remove font family property
o add background colour #bce27f
ul
o square bullet
o inside
img
o as is
Create section /**Class Selectors**/
.newspara
o As is
o Add text align left
.updates
o As is
o Add bg colour
Create section /**Layout**/
.container
o As is
.header
o As is
o Add bg image
.sidebarup
o As is
.sidebardown
o As is
.mainbox
o As is
.footer

104

o As is
o Add 1 px solid border colour 668e39
Create section /**Menu**/
#menulinks
o As is
#menulinks a:link, a:visited
o As is
#menulinks a:hover
o As is

105

WYSIWYG
What You See Is What You Get
This section can only be found on the Atutor Course site

106