HTML CSS Basics Activity

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.

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

_____________________________________________________________________________________
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

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

_____________________________________________________________________________________
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

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

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

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

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

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

_____________________________________________________________________________________
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

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

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

HTML CSS Basics Activity

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML CSS Basics Activity

Încărcat de

Drepturi de autor:

Formate disponibile

HTML & CSS Basics Activity

Extracting the Files

Opening and Editing collectibles.html

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

Cheryl C. Burgess | All Rights Reserved

The Basic Tags for HTML

Enter the following for the collectibles.html page:

Explanation of what you just typed:

Cheryl C. Burgess | All Rights Reserved

Adding Content to the HEAD of the Document

Explanation of what you just typed:

Cheryl C. Burgess | All Rights Reserved

Cheryl C. Burgess | All Rights Reserved

Cascading Style Sheets (CSS)

The Collectibles Page You are Creating

Cheryl C. Burgess | All Rights Reserved

Puzzle Analogy Revisited

Cheryl C. Burgess | All Rights Reserved

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

Creating the First Table --

Cheryl C. Burgess | All Rights Reserved

Adding the Content to the First Table

Cheryl C. Burgess | All Rights Reserved

Testing Your Work and Floating Images

Alignment Fix in One Cell

Adding the Content to the Second Row

Cheryl C. Burgess | All Rights Reserved

Cheryl C. Burgess | All Rights Reserved

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

Cheryl C. Burgess | All Rights Reserved

Saving the Pull Toys Page

Both images are 180 px wide by 200 px high

Cheryl C. Burgess | All Rights Reserved

Linking Your Pages

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

Testing Your Work in a Browser

Cheryl C. Burgess | All Rights Reserved

Submitting Your Work

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

Cheryl C. Burgess | All Rights Reserved

S-ar putea să vă placă și