[pcductape] Re: Html lesson #2

  • From: "Carl" <ctm007@xxxxxxxxxxxxxx>
  • To: <pcductape@xxxxxxxxxx>, <pcductape@xxxxxxxxxxxxx>,"Debb" <lillearners@xxxxxxx>
  • Date: Mon, 31 May 2004 21:51:38 -0500

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.  


  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 


  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: