Clear Day 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 ASAP 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 the things in the file manager first. And then we'll move into our sites. 1. UNDERSTANDING FILE MANAGER 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 says: welcome, llcare2 Yahoo!GeoCities Home>File Manager Your site: http://www.geocities.com/llcare2 Explanation: 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 open 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 Explanation: 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 you 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 upload 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 you 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.' Explanation: '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 http://www.geocities.com/llcare2 and http://www.geocities.com/llcare2/index.html is the SAME thing! So when you give others your page URL either one is 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 things. 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.' Explanation: Disk Space Usage Used: 0 MB Available: 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 room. 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 editor) 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 lines themselves!) I want you to paste in that space. It is important you get all of it. --------------------------------------------- <!--Created by Yahoo! GeoCities Home Page Generator--> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <!--COLOR--> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#C0C0C0"> <!--HEAD1--> <h1></h1> <br> <!--HEAD2--> <h3></h3> <p> <!--LINE1--> <p> <!--BODY--> </BODY> </HTML> ---------------------------------------------------- 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 will see these codes at the top: <xmp> <!--Created by Yahoo! GeoCities Home Page Generator--> <HTML> <HEAD> <TITLE></TITLE> </HEAD> </xmp> 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 are 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--> <HTML> <HEAD> <TITLE>My webpage</TITLE> </HEAD> This is the FIRST part of your assignment - putting that title in there. 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 you've worked on up until you last 'saved.' I learned the hard way. I save my work frequently! LOL Next you will see this on the page: <!--COLOR--> <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 color, in this case FFFFFF equals the color white and that is why your page is 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 have to look it up right now) but if you were to link something on your page 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 a 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 " okay. http://www.hitmill.com/html/colorchart.html http://www.hypersolutions.org/pages/rgbhex.html 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 page: <!--COLOR--> <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 colors 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: <!--BODY--> Explanation: Now everything you see between here and </BODY> 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: <!--BODY--> <BLOCKQUOTE> </BLOCKQUOTE> </BODY> </HTML> 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 minimum 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 centering. 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 new 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 view 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 use it often. Just experiment and view your page with different font styles. 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. <!--BODY--> <BLOCKQUOTE> <center><font face="comic sans ms" size=5>My Webpage #2</font></center> </BLOCKQUOTE> </BODY> </HTML> Go ahead and experiment with sizes and font styles. Always remember to end / your centering and your fonts /. Save and continuing editing. Preview your page at any time to see how it looks. WRITING YOUR PARAGRAPH: 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. <p> 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 your paragraph we need to use the pre and /pre codes. It will look like this in your editor: <pre> </pre> As much space as you put between your pre and /pre in your editor is as 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: <!--BODY--> <BLOCKQUOTE> <center><font face="comic sans ms" size=5>My Webpage</font></center> </pre> <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> <pre> </pre> </BLOCKQUOTE> </BODY> </HTML> 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 brackets. <br> 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. <b> yada yada </b> And the code i in brackets will italize your text and you will also need to end it with /i. <i> Whatever</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 </BLOCKQUOTE> <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 font 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. Also 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 can see your hexidecimal colors for linking now. We will learn more about linking very soon. ASSIGNMENT: 1. Your Title (that people who bookmark your page see) 2. Your hexidecimal codes - I want specifically the background and text 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 and 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 assignment. 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--> <HTML> <HEAD> <TITLE>My Webpage</TITLE> </HEAD> <!--COLOR--> <BODY BGCOLOR="#996666" TEXT="#FFFFFF" LINK="#000000" VLINK="#000000"> <!--HEAD1--> <h1></h1> <br> <!--HEAD2--> <h3></h3> <p> <!--LINE1--> <p> <!--BODY--> <BLOCKQUOTE> <center><font face="comic sans ms" size=5>My Webpage </font></center> <pre> </pre> <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> <pre> </pre> <center><font face="comic sans ms" size=3>This page hosted by <A HREF="/">GeoCities</A> Get your own <A HREF="/">Free Home Page</A></font></center> </BLOCKQUOTE> </BODY> </HTML> You are done! Hooray, this is probably the longest lesson you will have. Debb Chaos, panic, and disorder - my job is done here.