Do It Yourself Web Series #3
HTML Tags - Create Your Own Webpage?
By A.Laidlaw |
|
Newsletter Index
Ok so you want to make a webpage. Just staring at the blank page is scary, but have no fear by the end of this lesson you will have made your
first webpage!
This page explains everything that is needed for anyone wanting to create their own web page. Below this paragraph is
the table of contents. Click on any of the content subjects and it will take you to that section of the guide. I hope this guide is helps you get started on your first webpage.
Click Here to view the HTML Tag Reference List.
A great resource for you to see all the html codes.
Getting Started Title
The first thing to put on your web page, is a title. The title is what will show up in the very top of the window. Let's say that
your title is going to be "Alou Web Design's Web Page", you would type:
<title>Alou Web Design's Web Page</title>
In HTML, every command is surrounded by <'s, and >'s. And in most commands, you need to tell the web browser when to end this command. You do this by putting
a back slash (/) in front of the ending command, as in above. Since HTML isn't case sensitive, <title> is the same as <TITLE>. Next, you need to decide what you want to put on
your page. Text, links, graphics, and text fields, are just a few ideas. Follow the table of contents above to decide how, and what to put on your page.
Text
Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are displayed in larger, or smaller
fonts, and usually bolder. If you wanted to type "My Web Page", this is what you would type for each heading, and what the outcome is:
<h1>My Web Page</h1>
My Web Page
<h2>My Web Page</h2>
My Web Page
<h3>My Web Page</h3>
My Web Page
<h4>My Web Page</h4>
My Web Page
<h5>My Web Page</h5>
My Web Page
<h6>My Web Page</h6>
My Web Page
Paragraphs
Whenever you have more than a sentence of writing, you should have paragraphs.
To Make a paragraph of "This is my web page. How do you like what I have created? Please e-mail me with any suggestions at mymail@abc.com", type:
<P>This is my web page. How do you like what I have created? Please e-mail me with any suggestions at mymail@abc.com</P>
The outcome is:
This is my web page. How do you like what I have created? Please e-mail me with any suggestions at mymail@abc.com
Lists
There are two types of lists that you can make in HTML, dotted, and numbered. To make a dotted list of: red, orange, green, blue,
purple, black, and brown, type:
<UL>
<LI> red
<LI> orange
<LI> green
<LI> blue
<LI> purple
<LI> black
<LI> brown
</UL>
The result is:
- red
- orange
- green
- blue
- purple
- black
- brown
To make a numbered list of: red, orange, green, blue, purple, black, and brown, type:
<OL>
<LI> red
<LI> orange
<LI> green
<LI> blue
<LI> purple
<LI> black
<LI> brown
</OL>
The result looks like:
- red
- orange
- green
- blue
- purple
- black
- brown
Forced Line Breaks
Need to start a new line but not a new paragraph? To do this, you can use a simple HTML command. This is one of the few commands
that you don't have to put an ending command on. You want to say "Here is my new page", but with each word on a separate line. All you have to type is:
Here<BR>is<BR>my<BR>new<BR>page
The outcome is:
Here
is
my
new
page
Horizontal Rules
Every now and then, you might want to have a horizontal rule, or line in your page. Horizontal rules can be many different sizes
and lengths. You can also have the line be solid black, by typing NOSHADE. Here are several examples of sizes and widths, and what the outcome is:
<HR SIZE=1 WIDTH=100%>
<HR SIZE=5 WIDTH=50%>
<HR SIZE=25 WIDTH=75%>
<HR SIZE=3 WIDTH=100%>
<HR NOSHADE SIZE=1 WIDTH=100%>
<HR NOSHADE SIZE=3 WIDTH=100%>
<HR NOSHADE SIZE=10 WIDTH=20%>
Character Formatting
You may want to format some of your text differently than others using text styles. There are several types of styles of text
that you can use: bold, italic, underline, strikeout, superscript, subscript, teletype, and text
are examples. To do these styles, surround your text with the following commands:
<b>, </b> for bold
<i>, </i> for italic
<u>, </u> for underlined
<strike>, <strike> for strikeout
<sup>, </sup> for superscript
<sub>, </sub> for subscript
<tt>, </tt> for teletype
<blink>, </blink> for text (very annoying)
You can also mix styles together like this!
Linking
URLs
When you make a link, you are making colored text or even a graphic (talked about later). When somebody clicks on this text, it
will take them to another web page, or possibly a certain section of a web page. Let's say that you wanted to make a link from your web page, to Alou. The URL of Alou is: http://www.alouwebdesign.ca
To do this, you would type:
<A HREF="http://www.alouwebdesign.ca">What ever text that you want to be linked goes here</A>
The result would be:
What ever text that you want to be linked goes here
Links to Specific Sections
Sometimes, you might want to have a link that will take you further down a page, or to a certain section of another page. An example
of this is the index to this web page. You click on the colored text, and it takes you to that section. To do this, you need to do two things. The first, is to make the link, and the second,
is to make where the link will lead to. NOTE: You cannot make links to specific sections within a different document unless either you have write permission to the coded
source of that document or that document already contains in-document named links.
1) To make the actual link, think of a name for the certain spot. Let's say you are going to call it "spot". If this certain spot is on the same page that the link is, you would
type:
<A HREF="#spot">Linked Text
Otherwise, you would add "#spot" to the end of the URL.
2) Now, you need to make where the link will take you. Go to the spot where you want the link to take you, and type:
<A NAME = "spot">
Mailto Links
Most people like to have a link on their web page that automatically sends e-mail to an address. If you want to do this, and your
name is Anne, and your e-mail address is youremail@abc.com, type:
<A HREF="youremail@abc.com">Anne</a>
Here is the result of typing this:
Anne
Graphics
Putting Images On A Page
On almost EVERY web page on the net, there is some kind of graphic. Burt don't over load your pages. It slows down the loading
time too much. First, upload the graphic to your own hosting account.
To display a graphic that is in your account, type in the filename. If you made separate directories for graphics and pages, then you need to type the directory then the graphic's name.
(i.e. <IMG SRC="images/makeapage.gif">
Alternate Text for Images
Some World Wide Web browsers cannot display images. Some users turn off image loading even if their software can display images.
HTML provides a command to tell readers what they are missing on your pages. The "ALT" attribute lets you specify text to be displayed instead of an image. For example:
<IMG SRC="makeapage.gif" ALT="How to make a web page">
In this example, "makeapage.gif" is the picture of a sign. With graphics-capable viewers that have image-loading turned on, you see the graphic. With a non-graphic
browser or if image-loading is turned off, the words "How to make a web page" is shown in your window. You should try to include alternate text for each image you use in your document,
as it is a courtesy for your readers.
Note: Vision impaired viewers use text readers to read the text on the page. It relies on the "alt" tag to tell the viewer what the picture is.
Background, text, and link Color
On most pages, you want to have a specific color for the background, text, unvisited links, visited links, and active links. In
order to do this, you need to find the code number for the specific color that you are looking for. Here is a HUGE list of code numbers.
NOTE: Type these ONLY right below your title. NOTE: You must have the "#" sign before the actual code.
- <body bgcolor="#code">for background color
- <body text="#code">for color of text (all non-links)
- <body link="#code">for color of unvisited links
- <body vlink="#code">for color of visited links
- <body alink="#code">for color of active links (while being selected)
You can also string two or more of these commands together:
<body bgcolor="#000015" text="#000020" link="#000050" vlink="#7a7777" alink="#8f8e8d">
Background Graphics
Instead of having a solid color as a background, you might want to have one graphic that repeats over and over to create a background.
There are many places you can obtain free background graphics on the internet. Search for "free backgrounds".
The text that you would type in for a background called "nameofpicture.gif" would be:
<body background="images/nameofpicture.gif">
Linking with graphics
Sometimes on your web page, you might want to have a graphic that is a link. This is quite simple, since you just mix the two
commands of linking, and displaying graphics. Here is an example of a graphic that leads to Alou:
You can also have a text link next to the graphic that leads to the same place.
Alou
Website Design
Here is what you would type in for, first the plain graphic-link, and second, the graphic-link with text:
<A href="http://www.alouwebdesign.ca"><IMG SRC="http://www.alouwebdesign.ca/toolkit/images/alouwebdesign21.gif"></A>
<A href="http://www.alouwebdesign.ca"><IMG SRC="http://www.alouwebdesign.ca/toolkit/images/alouwebdesign21.gif">Alou!</A>
|