| So you want to create a web site, but you
don't know the first thing about HTML code? Well, rest assured,
it isn't nearly as difficult as you think. This guide will help
get you started, and teach you how to create a simple web page containing
text, images, links to other web pages, and an email link. What
you need for this tutorial is only a simple text editor program
like Notepad or other programs that you use for writing text on
your machine. If you're using Windows 95/98, just go to:
Start > Programs > Accessories
> Notepad
First, type the first line of our web page:
<HTML>
then type this:
</HTML>
You can type code in capital or lower case letters.
It doesn't matter. I typed them in capital to make it easy to read.
Nothing has happened yet; we have just told the browsers (Netscape,
Internet Explorer, and etc.) that this is a HTML document. The first
<HTML> is to tell the browser that "Here's the beginning
of HTML section." </HTML> tells the browsers that "Here's
the end of HTML section." Inside these two tags is where you
will put the contents of your web page.
Notice that we have <HTML> and </HTML>.
This is how we open and close HTML tags. The closing tag is always
in </.....> format. In most cases, you will have to close
every tag that you open.
Next, add a HEAD section to your web page.
<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
</HTML>
<TITLE> tells the browsers that the title
of our web page is "My first page." This sentence will
appear at the top of browser window. Where? Look at the top of this
window (the one that you're reading) and you will see "Beginner's
Guide to HTML"
OK. Now, let's put in the first word that the
browser will display.
<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
<BODY>
<H1>HELLO</H1>
</BODY>
</HTML>
We put <BODY> to tell the browser that
this is the starting point of the body of our document. <H1>
refers to header 1, which is the biggest text size (see below.)
You can try from <H1> to <H6>. Different numbers will
yield different sizes.
Here is an example:
h1
h3
h5
Now let's get back to our document. It now looks
like this in a browser.
Let's save this web page and view it in your
browser. Save the page using 'save as' and name it whatever you
like. Let's name it "mypage.htm" Please remember the location
of your file. You may create a new directory for it or just simply
save it in drive C. Open your web browser (Netscape or Internet
Explorer) and try to open the file that you just save. Click on
'File' -> 'Open' and type in c:\mypage.htm or the path to your
file.
You should see a big "Hello" in your
browser.
Now, we'll add a sentence and align it.
<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">HELLO</H1>
<P ALIGN="LEFT">This text is aligned "left"
<P ALIGN="RIGHT">This text is aligned "right"
</BODY>
</HTML>
<P> refers to paragraph. You don't need
the closing tag for <P>, but some people put the closing tag
as a reminder. <P> is the way to tell the browser to begin
a new line. We have put the word ALIGN after <P>. It's what
called an attribute, an optional indicator. Some attributes need
quotation marks, but some don't. An easy rule to remember is to
put the quotation marks in every attribute.
Here is how our page looks now:
HELLO
This text is aligned "left"
This text is aligned "right"
|
Next, let's add an image on our web page. You
can insert an image by using this tag <IMG SRC="....the
name and the location of your image ...."> Please see the
example below.
<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">HELLO</H1>
<P ALIGN="LEFT">This text is aligned left.
<P ALIGN="RIGHT">This text is aligned right.
<P ALIGN="CENTER"><IMG
SRC="images/logo.gif">
</BODY>
</HTML>
HELLO
This text is aligned "left"
This text is aligned "right"
|
<IMG SRC="tipsbanner.gif"> tells
the location of your graphic file. If it isn't in the same directory
of your web document (the one that we are working on), you have
to specify it differently. For example, calling it from your hard
drive <IMG SRC="c:\your_image_directory\image.gif">
calling it from the location on the WWW <IMG SRC="http://www.your_name.com/image.gif">
You might have a question by now. How can I
get an image? There are many ways: use a scanned image from a scanner,
download free clipart from other web sites, create it yourself,
etc. To use scanned images, you have to buy a scanner. Then, you
can scan your photographs. To download a free clipart, visit one
of the web's hundreds of free clip art sites. As I said earlier,
we will create a web page that has a link to another place, and
a visitor can send an email to you. We can make these possible by
using an anchor tag <A>. See the example below.
<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">HELLO</H1>
<P ALIGN="LEFT">This text is aligned left.
<P ALIGN="RIGHT">This text is aligned right.
<P ALIGN="CENTER">
<A HREF="http://www.hostsearch.com">
<IMG SRC="images/logo.gif"></A>
<P ALIGN="LEFT">
<A HREF="http://www.hostsearch.com">
Click here to go to HostSearch.com</A>
<P ALIGN="LEFT">
<A HREF="mailto:your@email.address">
email me</A>
</BODY>
</HTML>
You page now will look like this:
This <A HREF="http://www.hostsearch.com">........
</A> tells the browsers to link words or images inside to
the direction stated in HREF=" ... " You can use it for
email by using mailto:your@email.address (see example above.)
Now we have finished the tutorial. You must
save this file as an .htm or .html file. Simply click "Save
As" and name it whatever you want, ending with .htm or .html.
For example, mypage.htm. You can now test it from your web browsers.
Open your Netscape or Internet Explorer, select "file",select
"open", click "browse" or "choose file"
to select mypage.htm for viewing.
|
Low Cost
Web Hosts from Web Hosting Search Results 
