[pcductape] Re: Html lesson #2
- From: "Carl" <ctm007@xxxxxxxxxxxxxx>
- To: <pcductape@xxxxxxxxxxxxx>
- Date: Mon, 31 May 2004 22:04:39 -0500
Hi Sandi,
I tried to get the word "integrity" to flash in IE6 but it would not. It does
flash in the Mozilla Browser.
Carl
----- Original Message -----
From: Huntress
To: pcductape@xxxxxxxxxxxxx
Sent: Monday, May 31, 2004 9:59 PM
Subject: [pcductape] Re: Html lesson #2
Ok, I gotta say that it looks even better in NS7.1. I didn't know that the
word integrity was flashing???? It didn't in IE6.
----- 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:
http://www.geocities.com/carlmartininsurance/
I welcome constructive suggestions from anyone.
Carl
----- 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
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.
end of lessons 1 & 2
Other related posts: