[pcductape] Re: Html lesson #2

  • From: "Carl" <ctm007@xxxxxxxxxxxxxx>
  • To: <pcductape@xxxxxxxxxxxxx>
  • Date: Mon, 31 May 2004 22:02:56 -0500

Hi Sandi,

I just used Mozilla browser and it looks better in it than IE6.    Go figure.


  ----- Original Message ----- 
  From: Huntress 
  To: pcductape@xxxxxxxxxxxxx 
  Sent: Monday, May 31, 2004 9:57 PM
  Subject: [pcductape] Re: Html lesson #2

  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: