You are on page 1of 14

HTML & CSS Basics Activity

Extracting the Files


Within Canvas, you will see a file by the name of Tys_Toys.zip. Remember that zip files can be
likened to working with Ziploc bags. Lets use candy as an example. Zipping is used for sending
multiple files together across the Internet. Consider it similar to trying to toss a handful of
Skittles to someone and saying "catch!" In order for the person to get them all in one swoop,
putting them in a Ziploc bag and then tossing that to the person would make catching them
easier. But before they can eat any, they need to take them out of the Ziploc back (unzip them).
This is similar to the purpose of zipping files and sending them together to someone. Once the
files have been downloaded (tossed and caught), you need to take the files out of the zip file
before using them. This is called extracting the files.

For a refresher on how to extract the files, refer to the first lesson in the class. This is the reason
you were given this first assignment we use zip files a lot in this class.

Opening and Editing collectibles.html


Now that youve extracted your files, open the file by the name of collectibles.html in a web
editor (refer to the introductory portion of this lesson in Canvas for which editors to use).

The file will appear to be completely blank. Thats because it is.

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 2
_____________________________________________________________________________________

The Basic Tags for HTML

Enter the following for the collectibles.html page:

Explanation of what you just typed:


The <html> and </html> tags are the opening and closing tags on the page.
The <head> and </head> tags are the tags that contain the brains of the page.
This where stuff is added that is used by search engines, or additional
programming and links [such as Javascript or links to CSS (style sheets) for
formatting].
Between the <body> and </body> tags is where everything you wish people to
see on the page is placed.

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 3
_____________________________________________________________________________________

Adding Content to the HEAD of the Document

Explanation of what you just typed:


<meta> tags are used for adding keywords, page descriptions, and author
note (copyright claim)
<meta> tags help search engines find pages

Next type in a Title tag, just above the closing the </head> tag, as shown:

Adding Content to the HEAD of the Document Linking the CSS Page

The last thing to add to the </head> of this particular web page is the link to the CSS Page.
What is CSS? CSS stands for Cascading Style Sheet and is what gives the page its pizzazz its
flair. Its formatting. CSS was developed to help programmers so if you wanted all Level Header
1s to be orange, in a font of Corsiva and a font-size 24, instead of changing it on every single
page of a web site (which can be hundreds of pages for corporations), its changed in one file
that controls the formatting of all pages. This is called an External Style Sheet. There are
three types of Cascading Style Sheets, explained next. For now, add the following between the
<head> and </head> of your document :

This link to the stylesheet is an external style sheet and linking the page to the style sheet brings
in the formatting defined in that sheet to this page.

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 4
_____________________________________________________________________________________

Take a few minutes and open the file: toystyle.css within the editor you are using and take a
look at the page elements that have been defined and formatted within this document

This page can be edited at this point, but theres no need to edit it for this assignment. Just to
understand it.

Note: Each of the above should be self-explanatory, with the possible exception of the h1, which
stands for Header, Level 1

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 5
_____________________________________________________________________________________

Cascading Style Sheets (CSS)


Cascading Style Sheets (CSS) provide the formatting (the color, size, placement, and more) of web pages.
So its one thing to add images and text and tables to a page. CSS makes it look professional. There are
three types Style Sheets:

1. Internal
a. Internal style sheets are added within the HEAD tags of an HTML page.
b. If the page is referencing both an Internal and an External style sheet, the Internal
style sheet will override the defined elements that it contains, and the External style
sheet settings will be applied to anything not overridden by the Internal style sheet.
c. Internal style sheets are sometimes referred to as Embedded style sheets.
2. External
a. External style sheets are separate files that end in .css
b. A link to the .css file is placed within the HEAD tag of the HTML page youre
formatting with the CSS file.
c. External style sheets will be covered in the project, not in this assignment; although
all style sheets share many properties so learning Internal will help you with learning
External and Inline style sheets.
3. Inline
a. Inline style sheets define one element on a page differently than other like
elements. This is used when you want one level heading to have something
different than all of the other like level headings, or when you wish to have one
Paragraph formatted differently than the other paragraphs
b. Inline formatting overrides the other two style sheets

The Collectibles Page You are Creating

The page you are creating was shown to you in Canvas. Here it is again, only this time shown
where the tables have been created.

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 6
_____________________________________________________________________________________

Puzzle Analogy Revisited


Remember to consider the web page (collectibles.html) as the puzzle board, the images and text
as the puzzle pieces, and the table structure as the form for the puzzle. Remember the puzzles
you put together as a child that had the imprints in them to help you know which piece would

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 7
_____________________________________________________________________________________

best fit in a particular spot? Heres a reminder: Thats the


purpose of <table> and <div> tags.
They help you know where particular objects go on a page.
Remember piecing together the Flip Flop pages? A table was provided on the page and you
drug the images within each cell of the table. For this next step, you are creating the table
structure for the images.

Creating the First Table --


This is the table outlined in gray, with two rows, two columns, and the bottom row spanning
both columns. Enter the following between the <body> and </body> tags:

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 8
_____________________________________________________________________________________

Looking at the Cascading Style Sheet, you will see that without adding additional formatting to
this table, it will be 900 px wide, with a background thats white

Adding the Content to the First Table


1. In the first row, first cell (first column), we have the picture of the toys:

Figure 1 :headertoys.jpg

Filename: headertoys.jpg
Width: 237 px
Height: 199 px

Content is added between the <td> and </td> tags of the page. These are the column (or cell,
and also known as the table data). So to add this image to the table, enter the following
between the first set of <td> and </td> tags:

2. In the first row, second cell (second column), we have the logo and the navigation bar:

This is added by adding the following to the second set of <td> </td> tags in the first row:

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 9
_____________________________________________________________________________________

Testing Your Work and Floating Images


Open your page in a web browser to see your work so far. To do this, open Chrome, Firefox, or
Safari and press [Ctrl] + [o] or [Command] + [o], depending on your operating system. Then
browse to the collectibles.html page in your Tys Toys folder and open the page. You should see
the red background, the white table with the images youve added to the page so far.

Notice that the menu images are not totally touching each other. Theres a tiny space between
the images. To get rid of these tiny spaces, add the following style to EACH of the <img> tags
comprising the navigation:

Alignment Fix in One Cell


Within the opening <td> cell (containing the menu images), add the following style, as shown:

Adding the Content to the Second Row


Now we need to add the content to the second row of the table. This content is the second
table, outlined in blue above. This table consists of 2 rows, 2 columns and looks like:

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 10
_____________________________________________________________________________________

To add this table, place the following within the second row of the first table:

What do you type where the SECOND TABLE HERE is written? Here it is. Where indicated, add
the following table and content:

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 11
_____________________________________________________________________________________

Each TR is a table row and each TD is a table cell (column or data).


Once youve added this to the page, save and refresh the page in the browser.

Testing Your Work in a Browser and Centering the Table on the Page
1. Notice that when you open the page in a browser, its almost right, but everything is not
center aligned. To center align the table, add the following to the toystyle.css file:

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 12
_____________________________________________________________________________________

2. Finally, to apply this to both tables (which will center align the table on the page), apply the
center class to both tables on the page, by adding the class=center to each open <table>
tag, as shown:

3. Save and refresh in the browser. Your pages should now be working.

Saving the Pull Toys Page


1. With the page created, click: File, Save As and replace the pulltoys.html file. This page is
intended to have the same basic content as the collectibles.html page, with the exception
that it has two different toys on the page and a different page title for H1 (Header level 1):

phone.jpg xylophone.jpg

Both images are 180 px wide by 200 px high

2. Edit the content of the pulltoys.html page to add these images to the page in place of the
toys that are were there from the collectibles page. When you click Save, you will have two
working pages. This is done by:
a. Changing the content of both <H2> tags
b. Changing the image names from mrpotato.jpg and recordplayer.jpg to phone.jpg
and xylophone.jpg
c. Change the content of the alt= (alt attribute) for both images
d. Edit the text for the toy descriptions
e. Change the prices as you desire
3. Change the H1 from Collectibles to Pull Toys

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 13
_____________________________________________________________________________________

Linking Your Pages


1. Look at your menu (navigation options). Notice you have the following menu choices:

2. Remember that while this looks like one graphic, its actually five separate graphics.
3. While all of the pages are in your project folder, only two have content: collectibles.html
and pulltoys.html
4. You need these two pages to link back and forth in a browser. To do this, edit the HTML to
link the collectibles_menu.gif image to the collectibles.html page and the
pulltoys_menu.gif image to the pulltoys.html page. To do this, anchor tags encase each
image. Anchor tags are <a> and </a>
The anchor tag has a hyperlink reference attribute, written as href=
So to link each image, the code is:

Link both images on both (collectibles.html and pulltoys.html) pages.

The line is really long, so to make it more readable within these instructions, I cut it off
(shortened the img tag in the picture) to show you the syntax for the anchor tag. Here is
what the section of code on the page looks like, without cutting it off (but its small):

Testing Your Work in a Browser


Save both pages and open them in a browser (Chrome, Firefox, or Safari). Click back and forth
between the pages, making sure links on both pages work.

Cheryl C. Burgess | All Rights Reserved


HTML & CSS Basics Activity Page 14
_____________________________________________________________________________________

Submitting Your Work


Be sure to save the collectibles.html and pulltoys.html files as well as the toystyle.css file.
Next, zip the tys toys folder (which should have your images folder and your HTML pages and
your CSS file in it). Please note that there will still be the blank html pages included as well, but
you can leave them. The only pages that need to be edited for this exercise are those listed.
Attach the zip file to the submission box within Canvas for credit.
Zipping in Windows: You will likely have a couple of options. Select the one that
works --
o Right click on the folder and select Send to > Add to Archive
o OR- Right click on the folder and select Send to> Compressed (zipped)
folder
Zipping in Mac: Right click on the folder and select Compress

This will create a file ending in .zip in the same location as your folder. Locate this file and
attach it to the submission box.

For zipping assistance, also refer to Assignment 2 in Canvas.

Cheryl C. Burgess | All Rights Reserved