Bowie Home Page

Website #1

You are to design a website from scratch using "Notepad" or "Slash Editor". The theme is your "Identity".
You need a minimum of five main pages that represent you with the following links:

About Me - A self-portrait, auto-biography, favorite links, resume, passions, hobbies, talents, etc.

Portfolio - show all the projects you've created in class with descriptions unless they are on your "About Me" page

Family - include photographs and relevant information about what they mean to you

Friends - include photographs, poems, and/or slideshows of friends and events

Places of Interest - images of where you want to visit some day

Basic Rules for Good Website Design and Layout

Your website should:
be easy to read
be easy to navigate
consistent throughout
quick to download (optimized)
have titles and backgrounds on all pages

What is HTML anyway?

Well, HTML stands for Hyper Text Mark-up Language and is the "secret code" that is used to create the look and layout of all the documents on the web. Why do I call it the secret code? Because everything on this web page is the result hidden instructions, called tags, that tell the web browser how to display the text, the images, the color, and such.
Moreover, the web browser doesn't display the tags on the web page…so, that's why I call it the secret code.

Sound confusing? It might help for you to see an example of what HTML looks like with all those tags.

Look up on the browser window's toolbar, go under View, then click on Page Source. In a matter of seconds you will see all the hidden HTML tags for displaying the text and images you see here on this page. Oh, and keep an eye out for "less than" (<) and "greater than" (>) signs, because those are part of the instructions which your web browser reads and obeys.

HTML tag list

HTML Editor -great practicing page.

To begin learning html you need to read the tutorials on one of the websites.
(w3schools.com, Echoecho.com, tizag.com)
After reading information, begin your site today by opening "notepad" and typing in the basic tags.

Exercise 1 - What is HTML?

Create a New folder in your portfolio entitled, "Website1".
Open notepad and type in by answering the basic info as follows:

<HTML>

<HEAD>

<TITLE>your first and last name</TITLE>

</HEAD>

<BODY>

<H1>About Me </H1>

<p>

enter a paragraph about your school. What do you like the most? What do you like the least? What is your BIGGEST memory so far this year?

</P>

<b>Enter a paragraph about your favorite hobbies. What do you do on the weekends? What do you plan on doing this summer?</b>

</body>

</html>

add extra tags and info if you're ready for more or simply turn this in for a grade in the Z:"work turned in" folder.

Save this document as exercise1name.html in your folder. Make sure you save it as an .html file or it will not work.

Now, go to a browser "Explorer" or "Firefox" and open your file. You should see all the info you created.

****IMPORTANT*** You must save your document in "Notepad" or "Slash Editor" everytime you make a change or it won't work.

Exercise 2 - What is a CSS?

- - another link to a CSS & HTML tutorial
Use a Style Sheet to have consistent page formats.
If you still want another CSS info site click here.

Click on a website above and read about what a cascading style sheet is all about.

After you understand CSS, create your own and save it to your "website" folder and class folder for a grade entitled,"mystyle.css".

Exercise 3 - What are lists and links? go to Echoecho.com to read. You can also use w3schools.com or tizag.com

After readng the "html lists" and "html links" tutorials take the quizzes and proceed to creating your other linked pages such as: index.html (home page), portfolio.html, family.html, friends.html, placesofinterest.html, etc...

The "html links" should be the 5th quiz you have taken and printed screen shots of your quiz results into your PowerPoint.

You are on your own pacing now for website 1. You can work on the tutorials on your own time, anytime. Don't skip any!
Make sure you have ALL five or more pages all linked together before submitting for final grade.

Also, don't forget to take all 10 quizzes and capture each one to paste into a PowerPoint slideshow for me to grade.

Steps to creating all 5 pages for your first website by scratch typing the html code.

Make sure you have a folder "website1" in your portfolio. Create another new folder "graphics" in the same location. You may surf the net to find images and buttons you want to use for your first practice website. In the next project we will make animated buttons and banners!

STEP 1 Create the cascading style sheet that defines the web page style for your site call it mystyle.css

body

{
background-color: white;

background-image: url('background1.jpg');

font-size:12pt;

color: #f000000;

margin-left: 1cm
}

{
color: #000000;

font-size:18pt;

font-weight: bold;

font-family:arial;

text-decoration: underline;
}

{
color: #00ff00;

font-size:16pt;

font-weight: bold;

font-family:arial;

margin-left: 1cm}

{
color:navy;}

{
font-size:11pt;

margin-left: 1cm
}

a:link {color:green}

a:visited {color:yellow}

a:hover {color:black; text-decoration:underline; font-weight: bold }

a:active {color:blue}

STEP 2 - Create the main page or index.html of your website.
This page will contain the image links and text links and call the iframe for your website to display other website pages.

If you want to include images for your buttons instead of plain text links you will need to find some or create some and save them with the same names according to the links below.

<html >

<head>

<title>my website</title>

</head>

<body>

<tr>

<br />

<br />

<br />

<br />

<br />

</td>

</td>

</tr>

<tr>

<a href="aboutme.html" target="main_frame"> [homepage] </a>

<a href="portfolio.html" target="main_frame">[portfolio] </a>

<a href="family.html" target="main_frame">[activities] </a>

<a href="friends.html" target="main_frame">[favorites] </a>

<a href="placesofinterest.html" target="main_frame">[journal] </a>

</td>

</tr>

</table>

</div>

</body>

</html>

STEP 3 - Create your home page for your website. Type the HTML page you see below and save it as aboutme.html

<html>

<head>

<title>About Me </title>

</head>

<body>

<tr>

<hr />

</td>

</tr>

<tr>

<td>

<h3>Introduction</h3>

<p>Hello, my name is ____.I am taking a class that teaches me how to create websites, graphics, animation, video, and digital photography. Continue adding a total of 5 sentences to this paragraph.</p>

<h3>More About Me</h3>

<p>I love to play all kinds of sports, camp, and hike. I love to go to the movies with my family. I enjoy reading, art, and all kinds of music. To find out more about me you can visit my other Web pages by clicking on the image or text links on this page. </p>

</td>

</td>

</tr>

</table>

</div>

</body>

</html>

STEP 4 – Create the Friends.html and family.html pages below (they are basically identical except for the content)

<html>

<head>

<title>Friends Page</title>

</head>

<body>

<tr>

<hr />

</td>

</tr>

<tr>

<td>

<h3>Friends Page Introduction</h3>

<p>Add a total of 5 sentences to this paragraph that talks about your friends, clubs, sports, mall, activities, hobbies, and other things that you do with them.</p>

</td>

</td>

</tr>

</table>

</div>

</body>

</html>

STEP 4 – Create the portfolios.html page below

<html>

<head>

<title>Portfolio Page</title>

</head>

<body>

<tr>

<hr />

</td>

</tr>

<tr>

<td>

<h3>Portfolio Page Introduction</h3>

<p>Add a total of 5 sentences to this paragraph that talks about this class and the projects you have done or will do for this class</p>

</td>

</td>

</tr>

</table>

</div>

</body>

</html>

STEP 5 – create the placeofinterest.html page

<html>

<head>

<title>Places of Interest </title>

</head>

<body>

<tr>

<hr />

</td>

</tr>

<tr>

<td>

<h3>Places of Interest I'll Visit </h3>

<p>Here you will find my aspirations to visit places of the world. I will travel when I get a passport, the money, and the time....l</p>

</td>

</td>

</tr>

</table>

</div>

</body>

</html>