Exercise 1: Arrange Your Page into Sections (roughly 20
minutes)
The first task is to organize [Link] by adding ids, classes, spans and divs as seen in
lecture. Then, add "boxes" around these sections of the website by adding to
your journal_layout.css stylesheet.
Hint: Remember the way to define a border in CSS:
border: thickness color style;
For example, the following gives a yellow, dashed, 1px-thick border:
border: 1px yellow dashed;
You are going to match the output below (between, but not including, the thick black lines).
• The borders are all 5px thick and solid.
• The colors are the intuitive HTML color names, e.g. the red border is the HTML
color red.
• Note: You should not need define a class or id specifically for the h2s on this page.
Hint: To reduce the amount of id and class attributes you need to set in the
XHTML code, consider using CSS context selectors as appropriate.
The only major changes you should need to make to the XHTML code are
adding ids, classes, divs, and spans. You may also change the text of the journal if you like,
such as changing it to your name or rewording the journal entries. But please don't spend a
large amount of time doing this, so you can move on to the later exercises.
Exercise 2: Spacing With Padding and Margins, Backgrounds
(roughly 15 minutes)
You are now going to add padding, margins, and backgrounds to some of the parts you defined
in Exercise 1. You should only have to change your journal_layout.css file, if you
completed Exercise 1 correctly.
• The box with the green border should have a background color of white.
• The boxes with the blue borders should have a background color of #E8FBFB.
It should have a padding of 5px (on all sides) and margin of 10px only on the top of
the box (the margins for the remaining sides should be left at 0px).
• The overall page content area should become centered on the page, should have left
and right margins of 10% and a background image using the following image:
[Link]
journal/images/[Link]
You are going to match the output below (between, but not including, the thick black lines).
Exercise 3: Float, Alignment and Clear (roughly 15 minutes)
Now you're going to practice float, clear, and alignment on the web page. Part of this
exercise is understanding the difference between aligning and floating an element. You may
have to edit your [Link] code as well as your journal_layout.css stylesheet to get
the floats working properly.
• The heading text in the red box should appear on the right side of that section of the
page.
• The journal entry images should hover on the right side next to the surrounding text.
The image should stay within the bounds of the blue box; that is, it should
not bleed into the other content below it.
(Hint: If your boxes are not tall enough to fit the floating elements inside them, see
the "Making Floating Elements Fit" in Chapter 4 of the textbook.)
You are going to match the output below (between, but not including, the thick black lines).
Exercise 4: Cosmetic Finishing Touches (roughly 10
minutes)
Finally, we add some finishing touches to make the page look its best.
• Change the border of the box with the green border to be a solid, white, 10px-thick
border.
• Change the border of the boxes with the blue border to have a solid, 4px-thick
border, using the hex value #C2E9E9 for its color.
• Change the border of the box with the purple border to have only a bottom border,
and let that bottom border be blue, dashed, and 2px-thick.
• Change the background color of the box with the red border to be #A8F0F0 and get
rid of its border altogether.
• Change the font size of So fresh and so clean to 14pt and get rid of its border.
You are going to match the output below (between, but not including, the thick black lines).
Exercise 5: Upload Your Page to the Web (roughly 5 minutes)
Follow your instructor's directions to upload your page to your student web server. Verify that
you did this successfully by viewing your page in the web browser.
Exercise 6 (advanced): Add 2nd Column: Friends List
If you manage to complete the first four exercises before lab time is up, work on adding a
second column to the layout. You should copy and paste the following code into
your [Link]:
<h1>Friends</h1>
<ul>
<li><a
href="[Link]
.shtml">190m Buddies</a></li>
<li><a href="[Link] Will</a></li>
<li><a href="[Link] title="Conan the
Librarian">Conan the Librarian</a></li>
</ul>
Use the appropriate layout-related tags/attributes and CSS to make this list into a second, left-
aligned column as shown below. The colors, borders, etc. of the list are not important; the
focus is on the layout. The layout with a second column must still be a liquid layout --
that is, all parts of it should adjust in size accordingly when the browser size changes. HINT:
When multiple elements float in the same direction, they arrange themselves into columns.
Also see textbook Chapter 4's section on "The clear Property" for more information.
You are going to match the output below (between, but not including, the thick black lines).
Exercise 7:
Consider the below page and create your own webpage like
the given below sample, make sure to put your own data in it.
Exercise : 8
Go the followin URL find the code along with the video of the website, you are advised to uderstand this
code and make your own basic website just like there’s.
[Link]