Dream Website

You will create a three page website that outlines your absolute, most amazing Dream Job, Car, Meal, Celebrity Visit, College, or Vacation.  If you have done the vacation before then YOU CAN’T DO IT AGAIN.  Start fresh.

The three pages are:
-index (homepage)
-picture page – at least six image that relate to your topic
-information about your topic – what it costs, how you get the job, what is the recipe?  Also add three links to this page that link to other websites about your topic.

All pages must be linked to each other using text hyperlinks.

Before you start your HTML, create two new folders:
1. a folder labeled web design
2. inside of your web design folder create a folder labeled dream.

Index/Homepage:
-save this page as index.html
-this the homepage of your website.
-you should have one incredible photo of your dream choice and links to all other pages.

Picture page:
-save this page as pictures.html and title it ” Photos of (your topic)”.
-at least four images
-include links on this page to all of the other pages in your site.

Information page:
-save this page as info.html and title it “(your topic) Information”.
-create links to at least three websites that have info about your topic
-include links on this page to all of the other pages in your site.

Format each page so that text, backgrounds and colors work well together. Include images of your topic on each page.

Resources:
Sample html to get you started- click here!

Linking pages and linking to external websites:
https://www.w3schools.com/html/html_links.asp

Adding images: https://www.w3schools.com/html/html_images.asp

Changing background colors: https://www.w3schools.com/tags/att_body_bgcolor.asp

Making your web page background an image: https://www.w3schools.com/tags/att_body_background.asp

How to change font color and size for text:

1
<p style="font-size: 25px;font-family:verdana">It's so hard to choose two favorite aircraft out of all the amazing designs born over the last century.</p>

How to center an image:

1
<p style="text-align:center;"><img src="wbfirstflight.jpeg" width=600></p>

How create a line break:

1
<br>

How to change the size of an image – use the width=600 in your image tag:

1
<p style="text-align:center;"><img src="wbfirstflight.jpeg" width=600></p>

How to change font color and size for text:

1
<p style="font-size: 25px;font-family:verdana">It's so hard to choose two favorite aircraft out of all the amazing designs born over the last century.</p>

How to center an image:

1
<p style="text-align:center;"><img src="wbfirstflight.jpeg" width=600></p>

How create a line break:

1
<br>

How to change the background color of a page – replace the <body> tag with this:

1
<body style="background-color:grey;">

How to create a link to another page:

<a href="http://google.com">click here for google!</a>