Download JOSH EARL – SPRING 2007

Web Design – Web Sites: Lab 1 (My First Web Page)
Directions: Create a web page that shows some basic information about you. See page 2 for page requirements.
GETTING STARTED
1. Create a new root folder for this site under your Web Design folder called lab1. Add an images folder inside lab1.
2. Open Notepad++
3. Save the blank file as index.html (make sure you specify .html or it will save incorrectly as .txt)
4. To get started, you need to create the basic skeleton of any given web page (copy the code from lesson 2 notes)
5. Change the <title> element to say My First Web Page
6. Save web page file. Browse the file on the Internet (choose Run > Launch in _____) . You should see your title.
BUILDING YOUR WEB PAGE
Refer to class website (HTML Quick Ref page) to learn each of the following elements. You can use w3schools site for
additional practice or for more advanced information.
1. Headings
a. There are 6 to choose from <h1> is biggest <h6> is smallest.
b. Add your name to your web page using the h1 tag. Save and browse your page after each change you make.
2. Horizontal Rule (line)
a. Refer to the quick ref page for adding this line after your name on the web page (<hr> tag)
3. Paragraphs
a. Read the basic rules of the p tag and using br tag. Experiment by using w3schools editor or add to your page.
b. Type a paragraph below your name as stated in requirements (SEE PAGE 2 FOR THE REQUIREMENTS!).
4. Create an h1 for My Education on your page.
5. Numbered List
a. Not much too explain here, copy the example from reference page.
b. Add your Class Schedule to your web page.
6. Bulleted List
a. Not much too explain here, copy the example from my reference page to get started.
b. Add your strengths to your web page.
c. Add your things to improve on to your web page.
7. Add the Goals for this school year to your web page.
8. Add an h1 for My Favorites to your page.
9. Hyperlinks
a. There are 3 main types of hyperlinks.
b. Add your favorite sites to your web page using external links.
10. Table
a. Tables are a little tricky at 1st as you need to use several types of tags. <tr> is a row <td> is a column
b. Add a table for your favorite people to your web page (copy example on quick ref page to get started)
11. Pictures
a. Images are fairly easy to add, but you need CSS training to position them in different locations.
b. Add 3 images to your web page (place in a table as a mini gallery)
Copy example on quick ref page to get started. Note: you will need to learn to resize pics using a graphics editor.
The width and height code I gave you is just a quick way to shrink things on the page.
12. Other Practice
a. This section is trying to cover all other html elements you did not try yet. Refer to w3schools site for a list of
symbols (html entities link). For each line of practice figure out the correct tag to use (ie: sup, sub, pre, b, i)
13. Intrapage (jump) links
a. Refer to the quick ref page for how to do this. You need 2 lines of code.
b. Add a jump link at the bottom of your web page to “Jump back to the top”
Lab 1 cont’d…
Page 2
STUDENT NAME (heading 1)
Type a paragraph after your name that describes you as a person. What is your personal creed, who are you as a person
right now, what is your mission in life? What do you plan to do after high school, etc…
MY EDUCATION (h1)
CLASS SCHEDULE (h2)
1. Period 1 class
2. Period 2 class etc…
MY STRENGTHS (h2)
 Strength 1
 Strength 2
 Strength 3
Do this as a numbered list <ol>
(IE: skills you have that will help you get a future job)
Do this as an unordered (bulleted) list <ul>
THINGS TO IMPROVE ON (h2) (IE: things you need to improve on in school or life in general)
 Improvement 1
 Improvement 2
Do this as an unordered (bulleted) list
 Improvement 3
GOALS FOR THIS SCHOOL YEAR (h2)
1. List 5 goals you have for this school year (use numbered list).
this school year.
Example: Make honor roll the 1st 9 weeks of
MY FAVORITES (h1)
FAVORITE SITES (h2)
List 3 sites that you like to visit (school appropriate) (open in separate window using target =_blank)
Example for Google: <a href = “http://www.google.com” target=”_blank”>google</a>
FAVORITE ACTOR, ATHLETE, MUSICIAN, ETC.. (h2)
Create a table that displays at least 3 of your favorite people. Display some basic fact about them.
NAME
FACT
FAVORITE PICTURES (h2)
Display 3 images using a table (no borders) with similar width and height. Save pics in images folder and use alt tag.
Ex: <img src=”images/computer.gif” width =”400px” height=”400px” alt=”describe pic”>
Make at least 1 picture an image link (open in new window)
Pic 1
Pic 2
Pic 3
OTHER PRACTICE(h2) -- practice with symbols (aka HTML entities), subscript, superscript, bold, italics, <pre>
© ≠ ∞
(leave 3 blank spaces between each item using &nbsp;)
H2SO4
x4 + x 3 + x 2
This is bold text and To Kill a Mockingbird
Use the pre tag for computer code as you can format it easier than the p tag.
Go To Top
Create an intrapage (jump) link back to the top of page (2 steps needed- see quick ref page)