Site hosted by Angelfire.com: Build your free website today!

how to make a your very own deluxe homepage

a simple, easy to read guide for the HTML challenged

Hello This page will help people like u and mee to make their very own homepage. But first we must first delve into the wonderful world of HyperText Markup Language. Yes, yes i know it sounds like something complicated!!!aaaaaaack!! don't worry though. HTML is *basically* a bunch of codes or tags, that computers read and *magically* convert it into a webpage much like this one you are seeing. One needs to know HTML to make your deluXe homepage. Let's begin

4 steps to make a deluxe homepage

just follow these 3 steps and ur on ur way to becoming a webmistress/master.

  1. register for a free webpage
  2. learn HTML...read this homepage, and learn from it
  3. make ur homepage---> hard part
  4. advertise...advertise ur page to the world to see and *cherish*

the web Vocabulary list

these are just some words u should now before u go on so that u won't be all *conFused* when u read on later.

URL
the address of a webpage
http://www.angelfire.com/me/hapi/ is an example of an URL

HTML(the michelle definition)
"like i said before it stands for HyperText Markup Language, they are li'l 
codes, and tags that are converted into a webpage, when read by a web 
browser. It was invented by Tim Berners-Lee while at the Laboratory for 
Particle Physics in Geneva." 

web Browser
what one uses to view webpages i.e. Netscape, the AOL browser, and Internet 
Explorer.

link
something you click on that takes you to another page 
example: this is a  link 
to my homepage.

tag tags are little "thingies" that makes up the HTML they are usually made up of words or letters and < and > and a / Below is a list of a few tags, their corresponding end tags, and uses:

tags                             uses

<p> </p>                paragraph tag, used to write
<font size=3> </font>   font tag, used to formate the text, like change text color ot size
<b> </b>                makes the text bold-faced


I. let's lOOk at all the tags we need to know in order to make a page:
     <html>
     <head>,<title> The title of ur page</head> </title>      
     <body>
     <p> this part between is where u put all the good stuff...like 
     pictures, texts, tables, forms, and more...!!!!</p>
     </body>
     </html>

these tags are very very important..u hAVE to put them in so that web browsers, like Netscape/AOL/IE/ can *read* them


some last words...

okay now u are ready to begin ur HTML writting journey. i will now take u step by step in creating ur very own *deluxe* page. i suggest u print/bookmark this page because it's really really a gOOd reference. i'll try to explain some techinican junX, but they might sound alien to u. oh by the way, i will be giving examples throughout the "lesson"...and if u see this * mark... it means that it's a tag...just wanted u to know that so if u have any questions about anything...go on ahead and *eMail*..i like emails!!


the beggining

Let's say ur in your HTML editor, and ur just sitting there while reading, my li'l guide. Okay now, just go up to the top of this page, and COPY, the *essential* codes above. Make sure u know what your page is going to be about, or else ur gonna have a have a hard time deciding what kind of images or what to write on ur page. it happens.


the middle

this is where the <body> tag comes in. this is the most important part of ur page... it's where u put the images and text and all the good stuff...make sure u have the <html> <body> at the beggining...the text, images anything in the middle and </html> </body> at the very very end of ur document, it should be the last codes/tags.

****remember now: the following codes/tags i'm about to show u SHOULD be all between the <html> <body> </html> </body>!!!!!!!!

headings

headings are used to title homepages and things..

<h1>Biggest</h1>

<h2>kinda big</h2>

<h3>average big</h3>

<h4>getting smaller</h4>

<h5>small</h5>
<h6>smallest</h6>

putting in text...

to write something use the <p> </p> the paragraph tag.

for example: 
<p> hey hey look at meee i'm a text..heheh i'm also a paragraph </p>

would look like: 

hey hey look at meee i'm a text..heheh

this tag is used for making breaks/spaces between text, and images so it won't be all in a looooong line...

putting in some *emphasis* on text

if u want your text to be bold just insert in the <b> </b>

for example: 
<p>hey look u guys i'm <b> bold </b>  </p>

would look like: 
hey look u guys i'm bold

if u want text to be itactalized use the <i> </i>

for example:
<p> i'm <i>itactalized</i></p>   

would look like: 

i'm itactilzed

if u want text to be underlined use the <u> </u>

for example:
<p> i'm <u>underlined</u></p> 

would look like: 

i'm underlined

don't forget to use the coressponding end tags, if u want to stop underlining, itactalizing, or making ur text bold.


changing the size/style/color/ of text

u can change the size/style/color/ of text using the <font> </font>
change text size:

always remmber that 1 is the smallest and 6 is the BIGGEST...u can also use + and - to adjust the text size example: i'm <font size=1>really reallly small</font> i'm <font size=6>BIG</font> would look like: i'mreally really small i'm Big chaging the color this only works with netscape 2+ insert *color* and an rgb color code in the <font> example: i'm <font color="#a62a2a">brown</font> would look like: i'm font color="#a62a2a">brown changing the style of the text insert the *face* tag to change the style of text example: i'm <font face=Arial>Arial</font> would look like: i'm Arial U can also put all font face, color, size together like: example: <font color="#a62a2a" size=1 face=arial>i'm size 1 brown,arial</font> would look like: i'm size 4 brown,arial don't forget to use the end tag </font> whenever u want the size, color, style of the text to stop, and return to normal


the colors and images....

ok, now you know how to write stuff on your page, i will now tell you how to put colors on your page...*wo-Hoooo*. you can decide what your homepage's background color, text color, links, and visited links color. HTML uses the rgb color codes. rgb is a 6 digit color code, and each a code represents a color. when writting in the letters..it doesn't matter if u put them in CAPS or noncaps... they're the same.

here are some rgb color codes...
        #FF0000   red            is same as #ff0000 red. and so forth...
        #FFFFFF white
        #0000FF   blue
        #FFFF00  yellow
        #4F4F2F dark olive green
        #545454  dim grey
        #E47833  mandarin orange
        #238E68 sea green  (nice color)
        i'm not going to list all the colors, here's  more

ok, ok so u say.. *what am I supposed to do with this rgb color code thingies*..well, your going to use them to color almost everything

putting color on background of your page, text, links, and visited links... if u don't know what links are, i'll tell u more about them later, but for now don't think about them, and ask questions to urself....just type in what i say...

go to the top of ur page to where u see the <body> tag.
now do this: <body 
                 bgcolor="#238E68"
                 text="#000000"
                 link="#4F4F2F"
                 vlink="#545454">
now u have a  sea green colored page, with black text, dark olive green links and dim grey visited links. if u *wish* to change the colors....just take out the 6 numbers/letters and put in whatever color code u wish....just make sure it's pleasing to the eye :)
to make the colors work make sure u put the quotation marks before and after the color code like: "#rgbcode" and also that u have </body> at the end of ur page.

the images

ok finally the images...whoppedo...this part is real easy if you've seen the *UPLOAD* button on your web shell( angelfire) or in ur File Manager ( fortunecity), now i'll tell u what they're all abOut...

webbie browsers recognized gif and jpg, as images...so *remember* ok?

hunting (stealing...) and saving images on a diskette.

when *hunting* and saving your images, i strongly suggest u use one of those hard diskettes. put them in ur computer...and choose a:/ when saving an image

to steal images:
1.make sure the images u plan to steal are not copyrighted...please..do
i suggest u go to one of those nice and generous sites that provide people *free images*
2.click the *left* mouse button, and a li'l menu should appear...
3.chOOse *save as*.
4.chOOse a:/ 
5.that should save ur image on ur diskette.
6.now u may look for more images or upload it.
practice stealing images..(((ahem))) hunting i mean :)

to upload images:

1.click on browse 2.look for the image's name in a:/ 3.once u've found it, click Upload 4.and now you've uploaded an image....ur image should now have a URL (link) for example, in my case my address is http://www.angelfire.com/me/hapi/ so ok, i uploaded an image into Angelfire called girl4.jpg, so if i want to see the girl picture... i just go to it's URL ------> http://www.angelfire.com/me/hapi/images/girl4.jpg got it? if not pleeease *email* me so i can clear up any questions u may have.

Putting images on your homepage

use this code <img src="URL of the image">

example:  
<img src="http://www.angelfire.com/me/hapi/images/girl4.jpg">

would look like:


centering images and text

to center an image/text use the <center> </center> example 1(text): <center> hey look i'm in the center</center> would look like:

hey look i'm in the center

example 2(image): <center><img src="http://www.angelfire.com/me/hapi/images/smileyt.jpg"> would look like:

putting together text and images

if u put and image next to a text, the text automatically is automatically aligned at the bottom:

example: 
<center><imgsrc="http://www.angelfire.com/me/hapi/images/girl4.gif"></center>
HeLLo heLo i'm aligned at the bottom of this page

would look like: HeLLO heLLo i'm aligned at the bottom of this page

aligning text on top of the image

insert the *align=top* in the <img src> tag
example:
<img src=http://www.angelfire.com/me/hapi/images/bruce.jpg" align=top>
i'm aligned with the top of this image!!!!!
would look like: hey hey lookee meeee i'm on top of the page

aligning text with the center of an image

insert *align=center* in the <img src> tag
example:
<img src=http://www.angelfire.com/me/hapi/images/bruce.jpg" align=center>
i'm aligned with the center of this image!!!!!
would look like: hey hey lookee meeee i'm on top of this image

Linking

linking is going from one Homepage to another...if u click on *this link* it will take u to my page!!! well go on and read on and learn how to make links...

how to make a link

1.start by writtng in <a (include a space after) 2.put in href="URL of a webpage"> (don't forget the quotation marks) 3.enter the title of the page 4.end it with </a> 5.now u have a Link!!!!!
example 1:
hey you there visit <a href="http://www.angelfire.com/me/hapi/">my homepage</a>

would look like: hey you there visit my homepage

example 2:
read some <a href="http://www.angelfire.com/me/hapi/hahaa.html">funny junk</a>

would look like: read some funny junk

making images as Links

using this format:
<a href="URL of the page"><img src="URL of the image" border=0></a>
example:
<a href="http://www.angelfire.com/me/hapi/hahaa.html"><img src=http://www.angelfire.com/me/hapi/smileyt.gif border=0></a>

would look like: here to go to the top of this page.

here is how to do it:
let's just say the
URL is http://www.angelfire.com/me/hapi/makehome.html
TOP is the name of the part where u want the link to go to.

1.<a href="http://www.angelfire.com/me/hapi/makehomepage.html"#TOP> title</a>
2.go to where u want the link to go to and put in <a name="TOP">go to TOP of this page</a>
creating the *email* me link
use this:
<a href="mailto:ur email address">l;your name</a> (don't forget the qoutes)

for example: 
hey email <a href="mailto:bettleguese@softhome.net">me</a>
would look like:
hey email me

make sure u put in the </a> after every link. don't forget the quotation marks, without them, ur links won't work.


GuestBooks and Counters

If u want people to leave comments about ur page, or just write something, then u, might want
to get a guestbook.  There are many websites that offer free guestbooks. 
here's just a some of them:
 the Lpage guestbook 
it's free. and it's the most popular one..now known as GuestWord
 DreamBook 
free.provided by webring service
 Toast GUestbook
free. u can costumize it with ur own images, or choose from their site.

Counters

counters count the number of people that visited ur homepage. before u get one, check ur free homepage provider, they usually provide it's members with a free counter.
so did u learn anything....did u?did u? did u? please do ask me any questions u may have. email me

oh yaaaay! i'm now i've got a homepage..what do i do now

  • You can learn more HTML...use the wonderful *view source* on Netscape to see how a certain page is made...it's an excellent teaching tool :)
  • sign other people's guestBook to advertise ur page
  • join a webring to let ur others know u have a page
  • submit your webpage to search engines, like yahoo...infoseek, and such...
    the End
    for now, maybe i'll tell u all about tables/forms/frames/ next time
    but if want to know about them, just email me, and i'll tell u more about them.

    :||:home :||: wisewords :||: :||: bored? :||: make a homepage :||: music :||: Philippines :||: :||: trip 1999 :||: laugh here :||: who? :||: Sign Guestbook :||: View the Guestbook