HTML Tutorial
Learning to Create HTML Web Pages
Directions: The web page will include appropriate content of your choice (Your favorite music, sports team, food(s), celebrity, TV show, or movie). and must have the following:
Part 1- The Basics 
Step 1- Open Notepad -> Start, Programs, Accessories, Notepad) and create a
new document.
Step 2- Type the following tag: <HTML>
and press enter on your keyboard.
Step 3- Type the following
tag to change the color of your background to blue <BODY
BGCOLOR="0000FF"> and press enter on
your keyboard.
Step 4- Type in the
following tag to change the color of your text to orange <FONT
COLOR="FF9933">
and press enter on your keyboard.
Part 2- Adding Content
Step 1- Type in a title for your Web
page. This should reflect the topic that you choose.
Step 2- Type
<BR> and press enter on your
keyboard. This tag will allow you to skip lines.
If you do not type in <BR> you will not skip lines
even if you click on return to go to the next line!!!
Step 3- Type 8-10 sentences on your
topic. You may skip lines to split up paragraphs by using the
<BR> tag.
Step 4- After you are finished with
your last sentence press enter on the keyboard and type <BR>
Step 5- Save your work to your folder as your last name.
Part 3- Previewing your
Web Site
Step 1- Open your My Documents
file.
Step 2- Find the file that is saved as
your last name.html.
Step 3- Double click your file and it
will appear in Internet Explorer.
Part 4- Changing the colors
Step 1- To change the background color of your page( <BODY
BGCOLOR="0000FF">) you will have to change ONLY
0000FF to any of the
following to get the color of your background that color:
| 990033 | FF3366 | CC0033 | FF0033 | FF9999 | CC3366 | CC6699 |
| FF0066 | FF3399 | FF0099 | FF33CC | FF00CC | FF66FF | FF00FF |
| CC00CC | CC00FF | 9900CC | 990099 | CC99CC | 996699 | 660099 |
| 6600CC | 9966FF | 330066 | 6600FF | 6633FF | CCCCFF | 9999CC |
| 3333FF | 3333CC | 0066FF | 0033FF | 3366FF | 3366CC | 000033 |
| 003366 | 6699CC | 006699 | 3399CC | 0099CC | 66CCFF | 003399 |
| 009999 | 669999 | 99CCCC | CCFFFF | 33CCCC | 66CCCC | 336666 |
| 00FF99 | 339966 | 006633 | 336633 | 669966 | 66CC66 | 66FF66 |
| 009933 | 33FF66 | 00FF66 | CCFFCC | CCFF99 | 99FF66 | 00FF33 |
| 009900 | 33FF00 | 66FF00 | 99FF00 | 66CC00 | 00CC00 | 339900 |
| CCFF00 | 999900 | CCCC00 | CCCC33 | 333300 | 666600 | CCCC66 |
| FFCC00 | FFCC66 | FFCC33 | CC9933 | 996600 | CC9900 | CC6600 |
| 996633 | 330000 | 663333 | 996666 | CC9999 | 993333 | FFCCCC |
| CC9966 | FFCC99 | FFFFFF | CCCCCC | 999999 | 666666 | 000000 |
Step 2-
To change the font color of your page( <FONT
COLOR="FF9933"> ) you will have to change ONLY
FF9933 to any of the
colors listed above to change the color of your fonts.
Step 3- You may preview you page by saving
first and following the directions in Part 2.
Part 5- Changing the Size
and Types of Fonts
Step 1- In Simple Text and
under your last <BR> after your paragraphs type the
following tag <FONT
FACE="COMIC SANS MS">
Step 2- Press enter on the
keyboard and type the following tag <H1>
. The H1 tag is the largest size. You can use
any size from <H1> through <H6>.
Step 3- Type <BR>
press enter on the keyboard again and type the
following: This site was
created by "Your Name" in Mr. Bianchi's Computer
Application Class.
Step 4- Pres enter on
your keyboard and type
<BR>
Step 5- Press enter on the
keyboard.
Step 6- To preview your page save
it and follow the directions in Part 3.
Other Types of Fonts
|
|
Old English Text MT Puppylike Comic Sans MS |
Part 6- Adding Pictures to
your Web Site
Step 1- Find a picture that you
want to include on your Web site.
Step 2- Right click on the picture.
Step 3- Click Properties.
Step 4- Highlight and copy the address
of the picture.
Step 5- Paste the address of the
picture between the quotation marks for the following tag: <IMG SRC="address
of the picture">
Step 6- Press enter on your keyboard and type
<BR>
Step 7- Save
and preview your Web site by following the directions in Part 2
Step 8- Repeat this process until there are 3 pictures on
your Web site.
Part 7- Adding
Hyperlinks
Step 1- Type <BR>
Step 2- Type My Links.
Step 3- Type <BR>
again
Step 4- Type the following tag <A
HREF="http://www.yahoo.com">
Step 5- Next type Yahoo.com and
hit enter on your keyboard.
Step 6- Type the following tag </A>
Step 7- Type <BR>
and create another link by following the directions above but change
the yahoo.com to another Web site that you want
included on your Web site.
Step 8- Hit enter on your key
board and type <BR>.
Part 8- Formatting Text
Step 1- Type <BR>
and hit enter on your keyboard.
Step 2- Type the tag <B>
to make your text bold and press enter.
Step 3- Type the tag <Center>
to center your text to the middle of the page and press enter.
Step 4- Type the tag <U>
to underline your text and press enter.
Step 5- Type I
will create my next Web page from scratch.
Step 6- Type </B> to stop making
your text bold and press enter.
Step 7- Type </Center> to stop
your text from being centered and press enter.
Step 8- Think about how you could stop
your text from being underlined and type the tag in.
THINK ABOUT IT. DO NOT ASK ME HOW!!!! I WILL NOT TELL YOU!!!
FIGURE IT OUT!!!
Step 9- Hit return on
your keyboard and type <BR>
Step 10- Now type My
next Web site will be even better. Once you save it
and preview it, you will notice that it is no longer bold, centered
and underlined. That is because you included an END
tag. End tags stop the formatting process.
Step 11- Hit enter on your
keyboard and type <BR>
Step 12- Save and preview your Web site following the
directions in Part 3.
Part 9- Adding Lists
Step 1- Hit return on your
keyboard and type <BR>
Step 2- Type the following tag <UL>
and hit enter on your keyboard.
Step 3- Type the following tag <LI>one
element and hit enter on your keyboard.
Step 4- Type the following tag <LI>two
elements
Step 5- Type the following tag <LI>three
elements and hit enter on your keyboard.
Step 6- Type the following tag </UL>
to end the list and hit enter on your keyboard
Step 7- Save and preview your Web site
following the directions in Part 3.
Step 8- Hit enter on your
keyboard and type <BR>
Part 10- Adding Basic Java Script to your Web Page
Step 1- Hit enter on your
keyboard.
Step 2- Type the following <script
language="JavaScript"> and hit enter on your keyboard.
Step 3- Type the following //
put up an alert box, to show how they work and hit enter
on your keyboard.|
Step 4- Type the following alert("I
have created JAVA SCRIPT!!!"); and hit enter on your keyboard.
Step 5- Type the following </script>
and hit enter on your keyboard.
Step 6- Hit enter on your
keyboard and type <BR>
Part 11- Adding Sound to Your Web Page
Step 1- Type the following <BGSOUND
SRC="paste the URL of the midi file here"> and hit enter
on your keyboard.
Step 2- Visit the Free
Midi File site to find a sound file that you want to hear on your
page.
Step 3- Right click on the sound file, click on
Properties, and copy the address / URL of the sound file.
Step 4- Paste the address / URL of the file between
your quotation marks (where it says paste the URL of the midi file here).
Part 12- Adding a Marquee you Your Web Page
Step 1- Just below the title of your Web Page type
the following <MARQUEE> .
Step 2- Type in a phrase or a sentence that welcomes someone to your web page.
Step 3- Type </MARQUEE> to
end your marquee.
Part 13- Adding a Horizontal Rule to Your Web Page
Step 1- Just below your title and your marquee,
type the following <HR>
Directions: Using
the information listed above create a totally different Web site
that uses the following items and all of the
options listed. Also you may use the Quick
Reference Guide to learn more.
| Background picture is added | 3 points | |
| Title that is a) centered, b) bolded, c) underlined d) text is larger than the rest of the Web site e) font color is different from the rest of the Web site. | 10 points | |
| a) 8 sentences that deal with your title b) font is different color c) font is a different type than the title. | 6 points | |
| Three pictures are included in your Web site. | 6 points | |
| Two hyperlinks are created | 8 points | |
| Added a list | 4 points | |
| Create a Java Script message box. | 8 points | |
| Sound is added to your page. | 5 points | |
| A marquee and horizontal rule is added to your page. | 5 points | |
| Web page is neat and orderly. The site looks good. | 5 points | |
| Total | 60 points |
Adding Extras
1. Changing the size of a picture
<img src="name of your picture" HEIGHT=200
WIDTH=200>
2. Adding a Form (Example )
Enter your First Name
<INPUT TYPE="TEXT" Size="25">
Enter your last Name
<INPUT TYPE="Text" Size="25">
3. Adding Radio Buttons (Example )
The Best Place to eat is
<BR>
<INPUT TYPE="Radio" Name="Best">
Wendy's
<BR>
<INPUT TYPE="Radio" Name="Best">
McDonalds
<BR>