Mister Hungerford's Web Page
MESA
Web Page Design Competition
Web Page Creation Activity #2
The
purpose of this activity is to continue your introduction of a few simple
commands of Hyper Text Markup Language (HTML). You will experiment with web page creation using a simple
text word processor and HTML coding.
This
is a review of what we worked on last time.
1.
Made
a WebPage folder on a floppy disk.
2.
Began
working with a basic word processing program. (Notepad)
3.
Learned
the basic HTML document format.
<html>
<head>
<title> </title>
</head>
<body> </body>
</html>
Ø
The
HTML tag defines the document as a web page. All other tags are nested within it.
Ø
The
head contains information not displayed as part of the web page.
Ø
The
body contains the displayed portion of the page.
4.
We
looked at heading tags.
<h1> </h1>
The tag <h1> is a code for a header. The 1 stands for the size of the font. The larger the number, the smaller the
font. The smallest font is <h6>.
5.
Also
graphics and centering .To center the image, surround the image tag with the
center tags.
<center>
<img src="apple.gif"></center>
Some
Other tags we looked at were:
<b> bold text </b>
<i> italic text </i>
<img src+"name of
graphic file"> inserts a graphic, must be .jpg or .gif
<p> places a break between
paragraphs (note, no end tag on this one)
<hr?> inserts a horizontal rule
(note, no end tag on this one)
<a href="URL
address"> name of a web site </a>
inserts a hot link
Now for some more stuff.
We want to start by adding some tags to brighten up
the webpage.
<blink> </blink> makes the text
blink
<small> </small> makes the text
small
<big> </big> makes
the text big
We can change the Font size
<font size=i> </font> (where i is between 1 and
7) (7 is largest)
We can change the typeface
<font
face="arial"> </font>
We can also align the text:
<center> </center> centers text
<div
align="center"></div> centers
text
<div
align="right"> </div> aligns
text to the right
<div
align="left"> </div> aligns
text to the left
Take a few minutes and play with these new
tags. Begin creating a webpage
about this school. Include
anything that you find important to your life here as a student.
So. . .
Now you tell
me that your page is too boring.
You want to
spice it up a little bit.
We will now
add some color.
Color Attribute:
Color attributes on fonts, background of the web
page or any other tags that require color attributes are always set in six-digit
code based on the hexadecimal Number System (0 through 9 and A through F). The format of the value is two digits
for RED, followed by two digits of GREEN, and two digits of BLUE. Altogether it would be in the form of
RRGGBB. "0" is the
weakest number and "F" is the strongest. For example if a red attribute on font is desired, the tags
would look like this:
<font
color="#FF00000"> This text is in red!!!</font>
Below is a table showing some frequently used color
codes:
(OK I have to paste it in here)
Using colors:
Combining all the color attributes in the <body> tag including background
color, text color, link color (LINK), active link color (ALINK), and visited
link color (VLINK). For example:
<body
text="#0000FF" BGCOLOR="#808080" LINK="#008000"
ALINK="#00FFFF" VLINK="#A62A2A">
This would give us:
Body: BLUE
Background: ????
Link: GREEN
Active Link: AQUA
Visited Link: BROWN
For
more information on HTML check the following sites:
Digital's
HTML Starter Page
http://thuban.ac.hmc.edu/www_common/ips/HTML_PRECONFIGURED/HOW2HTML.HTM#BASIC_PAGE
How
a Web Page Works (excellent site)
http://www.howstuffworks.com/web-page.htm
Tutorial
to basic HTML
http://www.cwru.edu/help/introHTML/toc.html
HTML
Made Really Easy (HTML Tutorial)
http://www.jmarshall.com/easy/html
BareBones
Guide to HTML