[pcductape] Re: Html lesson #2

  • From: "Huntress" <sanneumann@xxxxxxxxxxx>
  • To: <pcductape@xxxxxxxxxxxxx>
  • Date: Mon, 31 May 2004 22:57:05 -0400

Not bad for starter!  Nicely centered and everything.  I'm going to go try it 
in Netscape 7.1 now.
  ----- Original Message ----- 
  From: Carl 
  To: pcductape@xxxxxxxxxx ; pcductape@xxxxxxxxxxxxx ; Debb 
  Sent: Monday, May 31, 2004 10:51 PM
  Subject: [pcductape] Re: Html lesson #2

  Hey Debb,

  I finished lessons 1 & 2.   My webpage is:
  I welcome constructive suggestions from anyone.


  ----- Original Message ----- 
    From: Debb 
    To: pcductape@xxxxxxxxxxxxx 
    Sent: Wednesday, May 26, 2004 12:34 PM
    Subject: [pcductape] Html lesson #2

    Understanding File Manager & Moving In    

    First of all don't freak out because this lesson is long!  It is not
    hard I promise.  It is mostly EXPLANATION.   We are going to learn some 
real basics at this time to give you some
    background.  And it is very important that you 'move into' GeoCities 
    or else GeoCities will delete your page!  And yes they
    will, it happened to me the very first time I began my page!  Scared
    the heck out of me.  So the assignment at the end will be your moving
    in and will consist of 6 things you will need to do.  

    I'm going to assume you all know NOTHING and try to explain some of 
    things in the file manager first.  And then we'll move into our sites.


    Go to your File Manager page which you should already have bookmarked
    (http://us.geocities.yahoo.com/filemanager) and sign in with your ID
    and password and then click on 'Open File Manager.'

    I'm going to briefly talk about this page using my own ID
    (llcare2) as the example!  In the upper left hand corner it

    welcome, llcare2  Yahoo!GeoCities
    Home>File Manager

    Your site: http://www.geocities.com/llcare2

    Now when I am working on my webpage I don't click on the above link to
    go to my page because you'll lose your file manager page.  Instead 
    a new window.  (Click on File, New, Window)So I will have 2 windows open, 
my file manager page and
    then my website as would be viewed by a visitor.  We don't need to use
    or worry about any of this.  You can have a 3rd window open with these
    instructions or perhaps it may be easier for you to print this out.

    In the upper right hand corner of your file manager page is:

          Your site: http://www.geocities.com/llcare2 Edit using: HTML 
EditorBasic HTML Editor  

                 checked files       files to Subdirectory    

              Name   Last Modified (GMT)   Size (KB 

    I don't use the 'Home' link so we don't need to worry about that.  I
      We will be using the  
    HTML Editor.  In the future everytime we begin a new webpage on our
    site (a 2nd or 3rd page, etc) we will start with the Basic Editor
    briefly but then go directly to the   Editor.  About the only
    thing you really need to know is that once you edit in HTML Editor, if 
    go back to your page and edit using Basic you will LOSE the work you
    did in HTML Editor.  So that is important to be aware of.  And 'upload
    files' we will be using in the near future - we will use this to 
    our music which will be a midi or .mid file or pictures and graphics
    which will either be a .gif or .jpg file.

    Now in the middle of the page on the left you will see a little box 
    can click in followed by the words 'index.htm' - 
           index.html View Jan 14, 2004 Stats  0 

    going along towards
    the right you will see 'view' followed by a 'date' followed by 'stats'
    and then a number (size/bytes). Above and below this row you will see
    'new,' 'edit,' 'copy,' 'rename,' and 'delete.'

    'index.htm' is your webpage!!  This is the page your visitors are
    viewing - your url or in my case it is

    http://www.geocities.com/llcare2 and
    is the SAME thing!  So when you give others your page URL either one 
    fine. I normally leave off the 'index.html'

    When we want to work on our page we will click in that little box to
    the left of 'index.html' and then click on 'edit' (either the one above
    or below - they are the same).  And we will always make sure we are in
      HTML Editor.  Where it says 'index.html' you will eventually
    have a whole list of things here - the names of your other pages which
    will all be .htm or .html, your music files .mid and your graphics and
    pictures .gif or .jpg - they will all be listed here in alphabetical
    order along with your index.htm. I don't want to confuse you too much
    at this point so this is all we need to know for now about these

      We are  going to
    ignore for now the rest of the stuff on this file manager page except
    for where it says "Disk Space Usage.'


                Disk Space Usage 
                0 MB 
                15.0 MB  
                Total Allocated: 
                15.0 MB 

    This is what mine is saying right now and yours should be similar. 
    GeoCities allows you 15MB   worth of space to create your
    website free.  This is a lot.  I think I was able to create around 50
    or so pages on my   site before I ran out of 
     But this also depends on what you put on your webpages.  If you put a
    lot of graphics and especially pictures you will run out of room much
    faster because those files take up more space.  By looking at my chart
    above you can see how many bytes I've used and how many I have left. 
    If you really get into your webpage and are approaching your 
    15 limit you may purchase additional space from GeoCities   for a very 
reasonable amount of money.  

    2.  MOVING IN

    Are you ready?  Let's begin!  In File Manager check in the little box
    to the left of 'index.htm' (make sure you are in the   HTML 
    and then click on 'edit.'  Do you see a big box full of Greek?  LOL 
    That is html!!  Do not worry, we will take it very very slowly. From
    scratch so in that box of html greek you see - I want you to delete 
    all of
    it!  YES, go ahead and delete everything in that box!

    Now everything below between the lines ------------- (and NOT the 
    themselves!) I want you to paste in that space.  It is important you
    get all of it.   
    <!--Created by Yahoo! GeoCities Home Page Generator-->

    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#C0C0C0">









    OK, good!  Now click on 'Save and Continue Editing.'  Go to your
    website page now and refresh it!  You should see a blank page with a
    little GeoGuide Banner box in the upper right hand corner.  You are
    doing good!

    Now we are ready for a little fun and your FIRST basic html codes!!!!
    I will go slow with this I promise!!  Don't be overwhelmed, one baby
    step at a time!

    Remember you are actually in your index.htm page now editing.  You 
    see these codes at the top:

    <!--Created by Yahoo! GeoCities Home Page Generator-->

     OK, all html coding will be in brackets < and > 

    Notice some of the coding is preceeded by a backslash / - that means
    'end' - <TITLE></TITLE>means start title/end title.  We 
    going to now put a title there for our page.  This will NOT appear on
    your website, this is what a visitor will see in their bookmarks if
    they bookmark your site.  Here is what I've put:

    <!--Created by Yahoo! GeoCities Home Page Generator-->
    <TITLE>My webpage</TITLE>

    This is the FIRST part of your assignment - putting that title in

    Now click above or below on 'save and continue editing' - it is
    important to do this frequently.  If you do a bunch of work on your
    page and your puter crashes or whatever you will LOSE everything 
    worked on up until you last 'saved.'  I learned the hard way.  I save 
    work frequently!  LOL

    Next you will see this on the page:

    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#C0C0C0">

    The color line!  This will be fun for you and part of your assignment
    for this lesson.  Some explanation first:  BODY BGCOLOR="#FFFFFF"  -
    the FFFFFF is called a hexidecimal code - it always consists of 6
    numbers and/or letters and each combination of that represents a 
    in this case FFFFFF equals the color white and that is why your page 
    white right now when visitors view it.  I'm assuming you all know what
    text is - the writing on your page!  000000 equals the color black so
    if you were to write on your page now the writing would be black.  

    LINK and VLINK.  Okay, again assuming you all know nothing - a link on
    a website is something a visitor can click on and go somewhere else -
    to another website or another page within your site.   A link can be
    text or a graphic or a picture.  It can be your email address where
    they can click on it to email you.  VLINK simply means visited link. 
    So your LINK color 0000FF I'm not sure if that is red or blue (I'd 
    to look it up right now) but if you were to link something on your 
    right now this is where you change the color for this link.  If you
    have a lot of links on a page and would like for your visitors to know
    which links they've already clicked on you can make your VLINK a
    different color than your LINK.  In this case the COCOCO I believe is 
    yucky gray color.

    The SECOND part of your assignment now is to change the BODY BGCOLOR
    and the TEXT hecidecimal codes to any color of your choice.  Here are
    some color charts for you to look at and bookmark for you to choose
    colors from - keep your 6 digit code number in between the "# and "


    These are just 2 I use, I'm sure you could run a web search for more
    but these should be enough to get you started.

    Here are the background and text colors I've chosen for my sample 

    <BODY BGCOLOR="#996666" TEXT="#FFFFFF" LINK="#000000" VLINK="#000000">
    Don't worry what you choose, these can be changed at any time at all. 
    I simply put in 000000 for black for my links for right now.  Visit my
    page at: http://www.geocities.com/llcare2 to see how my
    colors look.  Feel free to have some fun to play around with the 
    to see what you might like.

    Change your colors and click on 'preview' to see what it looks like or
    else 'save and continuing editing' and refresh your website to see how
    it will look to visitors.

    Now, since we don't yet have any text on our pages we better get some
    on so you can view the text color you've choosen!

    Scroll down in the page until you see this:


    Now everything you see between here and 


    is what visitors will actually see on your page!   

    Now before we put some text I want to tell you about blockquotes. 
    Using blockquote codes will indent your text and pictures a little on
    each side of your page so when someone looks at your site your words
    don't go clear across one side of their monitor to the other.  I use
    blockquote codes to make my pages look nicer.  It is optional but it
    will be part of your assignment to do this.  You can remove them later
    if you wish.

    I've added the codes where they should appear so yours should now look
    like this:



       So now all the stuff you will put on your page for visitors to
    view will be between your blockquote codes.

    Are you still with me?  I know this is long but I think easy, just a
    lot of explanation.   

    Alright!! Now we are going to give your page a name and write a 
    3 sentence paragraph about what your page will be about! This is your
    THIRD assignment in this lesson. 

    First we need to learn a little bit about fonts, font sizes, and

    FONTS:  Or called font face in html - this is the different style of
    text you can use/type with. You can use whatever font face you'd like
    if you have that font on your own computer hard drive!!  It is
    suggested you use a common font such as arial, comic sans ms, times 
    roman.    The thing you need to remember is that the person
    VIEWING your page will only see your cool font IF they also have that
    font on their own hard drive.  That is why it is suggested you use
    something common.  What if you use something really cute that the
    viewer doesn't have on their hard drive?  Well then they will just 
    the page in the default font which is times new roman.A 
    font I
    really like for some of my daycare pages is first-grader but I don't 
    often.  Just experiment and view your page with different font 
    I have a ton of fonts on my hard drive so if you want to use something
    different chances are I'll be able to view it. On my   website I use tahoma 
throughout most pages - it is
    suggested you do stick to one or two font styles throughout your site.

    FONT SIZES: In html there are 7 font sizes and they are 1-7 with one
    being the smallest.  3 is the default and what you will get if you
    don't specify a size.

    CENTERING:  If you want anything centered on your page you have to use
    the html center codes.

    With all font and centering codes you MUST end it with a backslash /

    Now we want to make the name of our page large or at least larger than
    the paragraph we are going to write underneath it.

    Look at what I've done and now you do this with your own unique page
    name.  This is your FOURTH assignment in this lesson.

    <center><font face="comic sans ms" size=5>My Webpage


    Go ahead and experiment with sizes and font styles.  Always remember 
    end / your centering and your fonts /.

    Save and continuing editing.  Preview your page at any time to see how
    it looks.

    I want this to be under your page title, it can be centered or not
    centered.  It must be at least 3 sentences long.  This is your FIFTH
    assignment in this lesson.

    Before you type your paragraph some more basic html to learn.  

    OK, the p in the brackets stands for 'paragraph' - so if you want a
    space between your title and paragraph you need to put that, it will
    only give you one space.  The p code you do NOT need to end with a
    /....if you'd like more than just one space between your title and 
    paragraph we need to use the pre and /pre codes.   It will look like this 
in your


    As much space as you put between your pre and /pre in your editor is 
    much space as visitors will see on your page.

    OK, for the paragraph.  Go ahead and type it up using the basic html
    you've just learned.  Here is my example to help you out:

    <center><font face="comic sans ms" size=5>My Webpage</font></center>

    <font face="comic sans ms" size=3>Hi, and welcome to my webpage help
    site!  I'm creating this page to teach basic html   so that others may 
learn to do their own pages.  I'm working
    along with them so please check back to see what we've done!</font>



    As you are typing your paragraph your lines will automatically wrap
    around as you go.  If you want spaces between your sentences use the p
    code.  If you just want to start a new line, the code is br within the
     That will start a new line without putting a space between
    them.  br stands for break and like the p code does not need the end /

    Just a few basics now FYI that you can play around with.  And I hope
    you are writing down everything you've learned thus far.  The code
    blink within brackets will make your text blink on the page! 

    <blink> blah blah blah </blink>

     LOL    The code b in brackets is boldface
    and you will need to end it with /b.

    yada yada </b>

      And the code i in brackets will
    italize your text and you will also need to end it with /i.

    *note:  any of this stuff you've done can be changed later on very
    easily.  Right now my goal is just to teach you the basics so you know
    how to do these things.

    GeoCode Line:  This is your SIXTH and last assignment.  I need you to
    copy and paste this coding below on your page right exactly ABOVE the

    <center>This page hosted by <A HREF="/">GeoCities</A>
    Get your own <A HREF="/">Free Home Page</A></center>

    You will notice that when you look at my html below that I added a 
    face and size to the above code.  The center is already there for you,
    you can and should be able to do the font yourself at this point.  
    when you view your page you will now see 2 links!  The 
    word 'GeoCities'
    is linked as well as the words 'Free Home Page.'  This is where you 
    see your hexidecimal colors for linking now.  We will learn more about
    linking very soon.  


    1. Your Title (that people who bookmark your page see)
    2. Your hexidecimal codes - I want specifically the background and 
    colors different.
    3. Your blockquote codes in the proper place
    4. Your centered and large page name - I will be looking at fonts,
    centering, and font sizes here.
    5. Minimum 3 sentences about your site - can be centered or not.
    6. The GeoCities line at the bottom of the page

    I will actually be going into your file manager with your passwords 
    looking at your html.  If I find mistakes I will not correct them, but
    I will email you and tell you about them and have you go back to fix
    them ... so please don't wait til the last minute to do your

    If you want to see my html simply right click on my page and choose
    'view source ' and my coding will pop up!  You can use this trick on
    any website (that doesn't have the no right click code on it) to see
    how they've done something.
    If the page has no right click on it, you can usually still see it by 
clicking on View on your toolbar, then on source.

    Here is my sample html of my entire page for you in case you'd like to
    view it here instead:


    <!--Created by Yahoo! GeoCities Home Page Generator-->
    <TITLE>My Webpage</TITLE>

    <BODY BGCOLOR="#996666" TEXT="#FFFFFF" LINK="#000000" VLINK="#000000">





    <center><font face="comic sans ms" size=5>My Webpage </font></center>

    <font face="comic sans ms" size=3>Hi, and welcome to my webpage ! I'm 
creating this page to teach basic html to  others
     so that they may learn to do their own pages.  I'm working
    along with them so please check back to see what we've done!</font>

    <center><font face="comic sans ms" size=3>This page hosted by <A
    HREF="/">GeoCities</A> Get your own <A HREF="/">Free Home

    You are done!  Hooray, this is probably the longest lesson you will


          Chaos, panic, and disorder - my job is done here. 

    end of lessons 1 & 2

Other related posts: