In the beginning of the internet there were no
personal web pages, no music downloading, and no eBay. The internet was
strictly for email and file transfers between research institutions. It was
not until 1990 that the internet became public to all. Since then the World
Wide Web has caused an evolution.
Businesses have not worked the same, and the way of life for most has never been the same. One of these evolutions has been in the style and quality of the web pages. Originally web pages were plain, unformatted text, and later came
format and images, followed by multimedia. Now computers can be used for almost anything. This series is going to explore the making of web pages, starting with the basics of html and moving on into more advanced topics and languages. There are three types of html documents: strict, transitional, and frameset. Strict is for all basic web pages; if you have something on your page that is a new media such as Flash then you would use transitional. If your page is in frames, you would use frameset. For the purposes of this week's article we are only going to be using strict. At the top of all the html files put: <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
HTML is a language of tags; everything begins with an opening tag (< name [/]>) and ends with an ending tag (</name>). The content is what goes between the tags. A series of these tags is what makes up a web page.
|
example:
|
<font>
This is an example of a
tag.
</font>
|
|
|
This example shows the use of a font tag, (<font>) which is used
for formatting text.
|
There are many different tags in html. The basic, most commonly used ones you can find below. Next week I will have a similar chart for frames, lists, and tables. For a complete and printer friendly version for a hands-on reference click
here.
HTML TAGS
|
|
TAG/ATTRIBUTE
|
DESCRIPTION
|
|
A
|
For creating links and anchors
|
|
HREF
|
For specifying the URL of the page or name of the anchor that the link
goes to
|
|
NAME
|
For marking a specific area of a page that the a link might jump to
|
|
TARGET
|
For specifying a particular window or frame for a link to open into
|
|
B
|
For displaying the text in boldface
|
|
BODY
|
For enclosing the main part of the page
|
|
BACKGROUND
|
For specifying a background image
|
|
BGCOLOR
|
For specifying a background color
|
|
TEXT
|
For specifying color of the text
|
|
BR
|
For creating a line break
(There is no end tag for this so
instead of <br>content</br> use <br /> at the
end of the line you are breaking from.)
|
|
CENTER
|
For centering text, images and other objects
|
|
FONT
|
For changing the color, face, and size of individual letters or
words
|
|
COLOR
|
For changing the color of the text
|
|
FACE
|
For changing the font
|
|
SIZE
|
For changing the size of the text
|
|
H
|
For creating a title
(A number 1-7 proceeds the h, e.g.
<h1>,
1 being the largest and 7 being the smallest.)
|
|
HEAD
|
For creating the head section of the page
(This is where you put
the behind the scenes information for your page such as the title and
search engine keywords.)
|
|
HR
|
For creating horizontal rules
|
|
ALIGN
|
For aligning horizontal rules
|
|
SIZE
|
For specifying height of horizontal rule
|
|
WIDTH
|
For specifying width of horizontal rule
|
|
HTML
|
For identifying a text document as an HTML document
(This is
required for all HTML documents.)
|
|
I
|
For displaying the text in italics
|
|
IMG
|
For inserting images onto a page
|
|
ALIGN
|
For aligning images and for wrapping text around them
|
|
ALT
|
For offering alternate text that is displayed if the image cannot
|
|
BORDER
|
For specifying the thickness of the border, if any
|
|
SRC
|
For specifying the URL of the image
|
|
WIDTH, HEIGHT
|
For specifying the size of image
|
|
P
|
For seperating paragraphs with a space in between
|
|
TITLE
|
For creating the title of the page in the title bar area
|
Now that you have the tags you need to build a basic web page let's learn how to put them together. Below you will see an example of code and what the product will look like.
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html>
<head>
<title>My First Page</title>
</head>
<body>
<center>
<h1>Welcome to My First Web Page</h1> </center>
<font align="justify">
<p>Welcome to my web page, I hope you
enjoy
your time here and
learn alot about
html.
HTML is a fun language to learn.</p>
<p>This is a picture of my dog Wes,
he is a
good boy. Isn't he cute in
his new
sling? He
just turned 2 last week on January 26th. He has
6
brothers and 1 sister.</p>
</font>
<img src="wes.jpg" align="right">
<body>
</html>
|
|
The html document begins with the strict tag mentioned earlier. Followed by the actual <html> tag, the document ends with the equivalent closing tag. Most of the tags you can follow to see how they are used. You will notice I have slight indentations for each level of code; this is a great way to keep track of which closing tag goes with which opening tag. The best way to get your page to look like you want is to experiment. The best way to do this is to open up your web page in notepad and in a web browser. One thing to remember is to save after all changes to the html file or you will not see the difference in the web browser. After saving the changes, hit the refresh button on the web browser. In addition to adding text and images, you can also add colors. There used to be only sixteen colors that were guaranteed to work on every web browser and every computer. With modern advancements in technology there are now 216 colors that are supposed to be universal, but for that 100% guarantee you have to stick with the original sixteen. The sixteen colors are so commonly used they can be selected by name.
|
|
|
|
|
|
|
|
|
BLACK
|
WHITE
|
RED
|
LIME
|
BLUE
|
CYAN
|
MAGENTA
|
YELLOW
|
|
|
|
|
|
|
|
|
|
|
GRAY
|
SILVER
|
MAROON
|
GREEN
|
NAVY
|
TEAL
|
PURPLE
|
OLIVE
|
Web safe colors are told in hex, e.g. #000000 is black, the absence of all color. The first two digits are for the level of red, the second set of two digits are for green, and the third set is for blue. The lowest level you can have is 00 and the highest is FF, so white is #FFFFFF. The web-safe 216 go up in increments of, 00, 33, 66, 99, CC, and FF. For a full hex color chart
click here!
Responses:
Refresh frame to view latest entries.
|
