HTML/CSS

Lab Manual for CMP521A Field Test – 2009

1

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.

2

Standardization

3

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.

4

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/)

5

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.

6

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

7

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.

8

HTML CODING

9

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.

10

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.

11

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 name…otherwise notepad will save

it as a notepad file! Navigate to the file, open and view it in a web browser.

12

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.

13

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:

14

15

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

16

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:

17

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 browser’s 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:

18

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:

19

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.

20

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.

21

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.

22

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.

23

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.

24

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 option…although 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.

25

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/html-

character-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.

26

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 image…be 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.

27

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

28

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.

29

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%">

30

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.

31

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">

32

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.

33

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

34

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

35

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.

36

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.

37

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.

38

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 within the same folder

<a href="contacts.htm></a>

/

- the / returns the link to the root of the webpage and then into the folder indicated - continue for each folder

<a href="/materials/forms/forms.htm></a> <img src="/graphics/logo.png>

.. - means to go back one folder (for each instance of ../) and then look for the file located within

<a href="../courses/cmp521/index.htm></a> <img src="../../2008/courseindex.htm></a>

What that would look like from a page within the wsb webpage would be

<a href="index.htm"></a>

39

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>

40

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/

41

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.

42

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.

43

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.

44

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>

So…to 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:

45

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

Mon Tues Weds Thurs Fri

9:00 Dr's Appt 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">

46

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>

47

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>

48

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.

49

50

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:

51

52

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">

53

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 a chart in a 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.

54

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.

55

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.

56

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.

57

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>

58

59

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.

60

Rubric

0 1 2

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 main layout table.

More tables could have been 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 resized to the appropriate display size or were not linked to appropriately.

Images were used 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.

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

Linking (Email) email link was not included email link was included

61

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, folder names did not make sense, folders did not exist

A mixture of appropriate file structure with confusing naming or vice versa.

File structure was understandable and file names 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.

62

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.

63

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/)

64

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

65

Standardization/HTML Lab Marking Scheme

ASSIGNMENT MARK NOTES

accesibilityshow /20 1 mark for pt and 1 mark for evidence

index.htm /3 all 3 items included in proper order

beliefs.htm /1 text between body codes

beliefspara.htm /5 5 paras incl heading

beliefsheading.htm /2 remove paragraph tag from our beliefs and add heading tag

beliefsrule.htm /1 add horizontal rule

lists.htm /9 +2 3 entries + 3 types of lists + bonus for nested list

characters.htm /7 1 pt per character

ourbeliefsfinal.htm /19 colours x5, bold x4, underlined x4, italicized x4, 2xfonts

characters.htm /13

imagetesting.htm /5 1 alt tag, 1 text top aligned, 1 relative link, 1 border, 1 spacing

hyper.htm /5 evidence that labs were tried and saved

tables.htm /5 evidence that labs were tried and saved

hyperassignment /12 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

keywordcomparison /10 5 marks for comparison, 5 marks for brainstormed keywords

searchenginecomparison /10 2 pts per search engine

troubleshooting code /10 10 errors in coding!

major assignment -- see rubric

66

CSS CODING

67

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>

68

<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>

69

</html>

70

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>

71

<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>

72

The style.css sheet reads as follows:

body {background-color:#99FFCC;}

73

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.

74

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

75

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.

76

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>

77

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.

78

Text

There are many ways in which to change the value of properties that relate to text.

property: value; Notes:

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size; 12px; small;

There are a variety of measurements that can be applied to fonts. The most common include pixels (px), and the default browser sizes such as small, medium, etc.

font-style: italic;

normal;

oblique;

line-height: 30px;

normal;

text-decoration: underline;

overline;

line-through;

blink;

none;

font-weight: bold; bolder; lighter; normal;

You may also choose 100, 200, 300, 400, 500, 600, 700, 800, or 900

text-variant: small-caps; normal;

text-transform: capitalize; uppercase; lowercase; none;

color: #99CCFF; red;

79

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:

80

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.

81

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: value; Notes:

background-color:

#99FFCC; red;

backround-image:

url(../images/leaves.jpg);

background-repeat:

repeat; repeat-y; repeat-x; no-repeat;

tiles the image tiles the image vertically tiles the image horizontally displays the image only once

background-attachment:

scroll; fixed;

selects whether the background image scrolls on a webpage or not

background-position:

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.

82

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.

83

Block

property: value; Notes:

word-spacing 3px; - increases or decreases the whitespace between words

letter-spacing 5px; - increases or decreases the whitespace between characters

vertical-align baseline;

bottom;

inherit;

middle;

sub;

super;

text-bottom;

text-top;

top;

- sets the vertical alignment of an element

text-align left;

right;

center;

justify;

- aligns the text within an element

text-indent 15px; - indents the first line of text in an element

white-space normal; pre; nowrap;

- how the white-space is handled within an element

display none;

inline;

block;

list-item;

run-in;

compact;

marker;

table;

inline-table;

- determines how and if an element is displayed

84

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

85

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.

86

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: value; Notes:

width: 150px; 30%; auto;

height: 150px; 30%; auto;

padding:

padding-left:

padding-right:

padding-top:

padding-bottom:

10px; auto;

the spacing between the contents of the box and the outside perimeter of the box

margin:

margin-top:

margin-bottom:

margin-left:

margin-right:

10px;

auto;

determines the space around an element

float: right; left; none;

determines where content (image or text) appears when included in a parent element (these are called "floating elements")

clear: right; left; both; none;

sets the sides of an element where other floating elements are not allowed

87

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.

88

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.

89

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.

90

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>

91

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:

92

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.

93

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!

94

Border

property: value; Notes:

border: border-right: border-left: border-top: border-bottom:

none

dotted

dashed

solid

double

groove

ridge

inset

outset

thin medium thick 5px

#000000;

- combine the three values into one, for

example:

border-right: thin dashed #FF0000;

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.

95

List

property: value; Notes:

list-style-type: disc;

circle;

square;

decimal;

lower-roman;

upper-roman;

lower-alpha;

upper-alpha;

none;

without specifying the type -- the default is circles

list-style-position:

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.

96

97

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: value; Notes:

type: absolute;

relative;

static;

- absolute allows you to place a "layer"

anywhere on the page (therefore it does

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;

- 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!

z-index: auto; 3 px; (a value)

- 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;

auto;

- 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

width: auto; 750px; (a value)

height: auto;

98

500px; (a value)

top:

right:

bottom:

left:

auto;

20px; (a value)

This is the placement relative to the upper left hand corner of the screen. Remember...not everyone has the same size screen!!

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

99

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

100

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.

101

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

102

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!

103

Assignment Listing

In the css folder you should have the following files:

practice.htm

styles.css

css major project

104

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

105

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

106

WYSIWYG

What You See Is What You Get

This section can only be found on the Atutor Course site