Sunteți pe pagina 1din 1

Webpage Design using HTML & CSS

Task: Geography Virtual Tour

Create: 3 HTML pages (minimum) & 1 CSS page

Directions:

1. Format & Design your Page: Write CSS Required Properties


your CSS sheet in the CSS & Result Elements
tab (click on the All tab to see all #header background-color, height, width, position, margin,
tabs). #footer background-color, height, width, position, margin,
.left font-family, color, margins
.right font-family, color, margins
p font-family, color
H1, H2 font-family, color
img height, weigh
a:hover font-size, color
div border-radius
li list-style-type
2. Required somewhere in your CSS table border, cell padding, height, width, text-align
sheet:
a. Place an image behind a line of text (header would be great for this!) using
z-index property (for help, go here!)
b. Use float propery to align text in header or footer (for help, go here!)
c. Use at least two hexadecimal color codes (for codes, go here)

3. Enter content, links and pictures to your webpage: Write


your HTML code in the HTML& Result tab. (click on the
All tab to see all tabs). 4. Google Maps: Embed a Google Map into each page.
a. Remember to include: The Map should pinpoint the exact location you want
i. <!DOCTYPE html> to visit.
ii. <html></html>
a. Here are a few resources to help you embed:
iii. <head></head>
ii. Instructions via Google
iv. <title></title>
v. <body></body> iii. Google Maps
vi. <p></p> b. Embed GoogleMap
vii. <h1></h1>
viii. <h2></h2>
ix. <img>
5. Continents: Choose a minimum of 3 continents to
x. <a href>
research and travel too.
xi. <ol> or <ul> with minimum of 3 <li>
xii. <div> 1. North America
xiii. <table> - minimum 2X2 size with table
2. South America
header
3. Europe
xiv. <span>
xv. style to assign at least one style
4. Asia
xvi. assign classes to html element 5. Africa
xvii. assign IDs to html element 6. Oceana
xviii. Attribution for all pictures at bottom of
each webpage or under a Resources
page