 Mr. V.'s HTML 101 *** Without The Blah Blah Blah *** |
Before embarking on the creation of your first web site, you need to do the following. You need to decide why you need to create a web site in the first place. What is the purpose of your web site? Who makes up your audience: adults, parents, teachers, salespeople, students, children, and/or anyone in general?
Then, you need to outline your goals: plan, brainstorm, surf the Internet to get ideas from other sites, and determine how many pages you will need and how they are going to be linked together (or if at all). Use plain or lined paper to decide the above. When you finish, continue to item #2 below.......
Now that you have a few pages on your hand and a few ideas in mind, you need two programs inside your computer. You need a "Text Editor" program, which all computers should come with, and an "Internet Browser" program, which again should be in your computer already. If you are missing either program, you can either download it from the Internet, free of charge, or you can simply contact your sales representative, where you purchased your computer, and ask to get a copy.
Now, if you have an Apple MACintosh computer, you can use "SimpleText" as you "Text Editor" and "Netscape Navigator" (or Netscape Communicator) or Microsoft's "Internet Explorer" as your "Internet Browser." If you have an IBM-compatible computer (one that uses Windows 95, 98, NT, 2000me, such as a Dell, HP, Packard Bell, Gateway, Compaq), you can use "NotePad" as you "Text Editor" and "Netscape Navigator" (or Netscape Communicator) or Microsoft's "Internet Explorer" as your "Internet Browser."
Important time-saving note to remember, once you open these two programs on your computer, YOU DO NOT NEED TO QUIT one program to work on the other. LEAVE BOTH PROGRAMS OPEN AT ALL TIMES. This will save you time, since you will jumping from one program to the other several times. Why? Every time you make a change to your "Text Editor" program file ("myhomepage.html"), you will need to save those changes by going up to "File" and selecting "Save." Then, you will need to "Jump" over to the "Browser" program to select "Reload" or "REFRESH" in order to see the newer, better-looking, web page with the new changes in place. Then, you will need to "Jump" back to the "Text Editor" program to continue to make more changes to your page.....And so forth and so on....Blah blah blah, this will make more sense later. Trust me.
Following this little blurb is a short and simple list of terms you should know, at least it was in the beginning. Read them now, digest them later. Actually, read the first ten terms or so, a-j, and skim the rest. You can start "Lesson #1" after you read terms a-j. Voila, your first "HTML" terms:
a) HTML= "HyperText Markup Language." This is the name of the programming language you will be using to create your web page. This is a powerful language in that all MAC's and PC's can use this language to create web pages that can be "understood" by all computers.
b) <> are called "Angle Brackets." You will be using these symbols around special words called "tags."
c) tags= special words, that are between angle brackets, that tell your web browser how to read and arrange words you type on your web page. Most tags come in pairs: <CENTER>Hi!</CENTER>. In this example, "Hi!" will be centered within your web page. Notice that an "end tag" has the slash (/) inside.
d) <HTML> begins an "html document" and </HTML> ends it.
e) <HEAD> begins the header on top of your web page and </HEAD> ends it.
f) <TITLE> creates a title at the top of your page (header) and </TITLE> ends it.
g) <BODY> begins a section of your html document called the "body" and </BODY> ends it.
h) <H1> begins a big Headline on top of the body and </H1> ends it. <H1> is the biggest headline, <H6> is the smallest. You can use <H1> through <H6>.
i) <P> begins a new paragraph and </P> ends it.
j) <BR> is a line break tag that does not require an end tag.
k) <B> = Bold </B>.
l) <I> = Italic </I>.
m) <U> = Underline </U>.
n) <FONT SIZE= 5> Bigger Words </FONT>.
o) <FONT COLOR="red"> For RED Words </FONT>.
p) <FONT COLOR="#FF0000"> Using the HEX Code Chart </FONT>.
q) <FONT FACE="Chicago Bold, arial" COLOR="blue" SIZE=5> to change the writing style </FONT>.
r) <P ALIGN=RIGHT> info </P> will align info to the right of your web page.
s) <BLOCKQUOTE> stuff </BLOCKQUOTE> will indent your paragraph stuff from the left of your page.
t) <HR> by itself, will create a Horizontal Rule, or a line with a light shadow.
u) <HR WIDTH=400> will create a line that is 400 pixels wide.
v) <HR NOSHADE SIZE=3 WIDTH=700 ALIGN=CENTER> creates a centered solid line, with no shadow, that is 700 pixels wide and 3 pixels thick.
w) <OL> and </OL> = Ordered Lists, with numbered items on each <LI> item.
x) <UL> and </UL> = Unordered Lists, with bullets, or dots, on each item on the list.
y) <LI> by itself, marks the beginning of each item on the list.
z) <TABLE> and </TABLE> creates a Table.
a1) <TR> and </TR> are used to create a new Row across the Table.
b1) <TD> and </TD> are used for a new Data cell within a row.
c1) <TABLE WIDTH=700 BORDER=7 BORDERCOLOR="yellow"> along with the </TABLE> will create a Table 700 pixels wide with a Border 7 pixels thick and a yellow Border Color.
d1) <TD BGCOLOR="#FFFF00"> along with </TD> will create a Table Data cell with a Yellow Background, using HEX code.
e1) <BODY BGCOLOR="pink"> and the </BODY> tag will give your page a pink Background. Note: You can use Color Names or HEX Code, within quotes, within any tag that allows color changes.
f1)<IMG SRC="lasergreen.gif"> places a picture called lasergreen.gif, name within quotes, into your page.
g1) <IMG SRC="mywebpagestuff/happyface.gif"> looks for the picture happyface.gif which is inside your "mywebpagestuff" folder.
h1) <IMG SRC="happyface.gif" WIDTH=200 HEIGHT=200 BORDER=4> to modify the size of your picture to 200 pixels by 200 pixels, inside a Border that is 4 pixels thick.
i1) <IMG SRC="happyface.gif" ALT="Smile!"> = Alternative Text. This tag displays "Smile!" while the picture is loading on your web page.
j1) <IMG SRC="happyface.gif" ALIGN=RIGHT> makes text that comes after this tag "Wrap Around" the left side of the picture.
k1) <IMG SRC="happyface.gif" ALIGN=LEFT> makes text that comes after this tag "Wrap Around" the right side of the picture.
l1) <BR CLEAR> by itself, or <BR CLEAR=ALL> by itself, makes the browser wait until the margins of your page are clear of images before displaying more text.
m1) <BR CLEAR=LEFT> waits for left margin to be clear of images before displaying more text.
n1) <BR CLEAR=RIGHT> waits for right margin to be clear of images before displaying more text.
01) <IMG SRC="happyface.gif" VSPACE=8 HSPACE=12> creates space between the picture and text. It puts 8 pixels of Vertical Space and 12 pixels of Horizontal Space around the image.
p1) <A HREF="destination">Write Text Here</A> creates a HyperText Link, or a HyperLink, to the "destination," using an Anchor Tag <A>, the Hyperlink Reference HREF, and the end tag </A>. This "Relative Link" can take you to a different place on the same web page, to a different web page within the same site, or a different web site.
q1) <A HREF=https://m2k7.tripod.com/memosphotos/">My Web Site</A> creates a hyperlink that takes you directly to this web site, my web site. This is called an "Absolute Link" due to the fact that it can take you to any web site on the Internet. In this case, it links you to my web page, using my address, or URL, "Uniform Resource Locator."
r1) <A NAME="Target Name">Target Text</A> creates a destination "Target Name" within a long page, like this one.
s1) <A HREF="#Target Name">Hyperlink Text</A> creates the hyperlink that "jumps" to the "Target." Notice the # is before the Target Name and both are inside the quotation marks.
t1) <A HREF="mailto:gbillago@lausd.k12.ca.us">Mail Me Your Suggestions</A> creates a link to get e-mail, using the "mailto:" link command, followed by your e-mail address, which in this case I used my actual e-mail address, followed by the Text you want to display, and then by the tag </A>. I am a teacher for the Los Angeles Unified School District, hence the lausd.k12 part. Anyway, ...
u1) <A HREF="mailto:gbillago@lausd.k12.ca.us">gbillago@lausd.k12.ca.us</A> creates a link to get e-mail, using your actual e-mail address as the text display, which makes it easier for others to jot down or remember your address.
v1) <BODY BGCOLOR="pink" LINK="blue" VLINK="magenta"> to specify what color you want your "Links" and "Visited Links" to have throughout your page.
w1) SOUND
x1) COUNTER
y1) FANCY TABLES
z1) <META NAME="KEYWORDS" CONTENT="HTML, pages, school, educational"> is a single tag that can be inserted anywhere between <HEAD> and </HEAD>; use when registering your web page; use as many descriptive words, followed by commas, as you want. Enough! Time to begin your "html document." Continue to the next section.
Finally, you can begin your adventure. First, create a new folder on your desktop. How? Click on your desktop, which is lying beneath everything you see on your screen, kind of like the "desk top" beneath all those piles of projects you have to get to which you have on your desk at home and/or at work. Sorry, I digress...Again, click on you desktop. On the MAC: go up to "File" and select "New Folder." On the PC: right click on the desktop and select "New" and then "Folder." Name this new folder "mywebpagestuff." You are going to save several items inside this folder: your "html file," other html files, pictures, gifs, sounds, and whatever else we can think of later. Leave this new folder on your desktop, simply to easily access it later.
Next, open your "Text Editor" program (SimpleText or NotePad). Create a new file (you should have a blank "untitled" page waiting for you as you open the program. The cursor should be blinking at the top of the page.
Make sure you type carefully. Also, don't worry about arranging it neatly in paragraph form. "Spaces" and "Return" or "Enter" are not recognized by the "Browser" program. Finally, again, COPY the following "HTML" source code in your new "Text Editor" file, exactly as it appears, except, replace "Mario, Luigi, And Peach" with your own name, both on the Header <HEAD> and on the Headline <H1>: <HTML>
<HEAD>
<TITLE>Mr. V.'s Home Page</TITLE>
</HEAD>
<BODY>
<CENTER> <H1>Welcome to Mr. V.'s Home Page</H1>
</CENTER>
<P>Hi! Welcome to my home page.</P>
<P>I created this page for several reasons: ...</P>
<BR>To share my ideas in cyberspace;
<BR>To earn extra income;
<BR>To learn HTML code; and
<BR>To keep in touch with other humans living within the information superhighway!
</BODY>
</HTML> Save your new file by going up to "File" and then selecting "Save" and save it as "myhomepage.html" inside your new "mywebpagestuff" Folder. While your "myhomepage.html" file is still open, find your "Internet Browser" program and open it, either Netscape or Explorer. From within your browser program, go up to "File" and select "Open File" and select your "myhomepage.html" file to open it. Tara! In seconds, you will see the following page: Welcome to Mr. V.'s Home Page Hi! Welcome to my home page. I created this page for several reasons: ...
To share my ideas in cyberspace;
To earn extra income;
To learn HTML code; and
To keep in touch with other humans living within the information superhighway! | Cool, Huh?! Notice how big the Headline <H1> is, compared to the other text on your web page. Also, a Paragraph tag <P> is equivalent to two Line Breaks <BR>'s. See?
To spice up your web page with Underline <U>, Italicized text <I>, Boldface <B>, Font Size, and Colors, return, without quiting your Browser program, to your "myhomepage.html" Text Editor file and modify the html source code as follows: <HTML>
<HEAD>
<TITLE>Mr. V.'s Home Page</TITLE>
</HEAD>
<BODY>
<CENTER> <U> <H1>Welcome to Mr. V.'s Home Page</H1> </U> </CENTER>
<P><I>Hi!</I> <B>Welcome to my home page.</B></P>
<P>I created this page for <FONT SIZE=5>several</FONT> reasons: ...</P>
<BR><FONT COLOR="red">To share my ideas in cyberspace;</FONT>
<BR><FONT COLOR="green">To earn extra income;</FONT>
<BR><FONT COLOR="#0000FF">To learn HTML code; and</FONT>
<BR>To keep in touch with other humans living within the information superhighway!
</BODY>
</HTML> Save your File: go up to "File" and select "Save." Again, without quiting your Text Editor program, go back to your Browser program, and as you see your first simple page, click on "Reload" or "Refresh" at the top part of your Browser program to reload your newer version of your "myhomepage.html" file. Then, you will see the following more vibrant page: Welcome to Mr. V.'s Home Page Hi! Welcome to my home page. I created this page for several reasons: ...
To share my ideas in cyberspace;
To earn extra income;
To learn HTML code; and
To keep in touch with other humans living within the information superhighway! | Cool, Huh?! Notice the Underlined title, how big the word "several" is, compared to the other text on your web page, the Italicized "Hi!," the Boldface, and all the beautiful colors!!! Nice.....
Before this lesson begins, you need to scroll down a little so you can see and copy a picture of a smiling blinking Happy Face. Obviously, continue reading these instructions before going down to the picture. Once you see the Happy Face picture, you are ready to copy it.
On a MAC: click and hold the mouse down on the picture for about three seconds, select "Save Image As..." and save it inside your "mywebpagestuff" folder on the desktop as "happyface.gif"
On a PC: right-click the mouse on the picture and select "Save Image As..." and save it inside your "mywebpagestuff" folder on the desktop as "happyface.gif"
Precaution, you may want to check your folder on the desktop to make sure your computer added the suffix ".gif" to the name of your picture. It should have, but if it didn't, all you have to do is click on the name of the picture and add it yourself: MAC: click the name of the picture file and change it; PC: right-click and select rename.
This is important only because the name of the picture has to match the name you are using on the HTML code on your page.
Now you may begin the next lesson.
To add a Picture to your web page, return again, without quiting your Browser program, to your "myhomepage.html" Text Editor file and add the following html source code as follows:
<CENTER><IMG SRC="mywebpagestuff/happyface.gif"></CENTER>
Notice that your folder's name "mywebpagestuff" is followed by a slash (/) and then by the name of the picture "happyface.gif," which should already be inside your folder "mywebpagestuff." <HTML>
<HEAD>
<TITLE>Mr. V.'s Home Page</TITLE>
</HEAD>
<BODY>
<CENTER> <U> <H1>Welcome to Mr. V.'s Home Page</H1> </U> </CENTER>
<P><I>Hi!</I> <B>Welcome to my home page.</B></P>
<CENTER> <IMG SRC="mywebpagestuff/happyface.gif"> </CENTER>
<P>I created this page for <FONT SIZE=5>several</FONT> reasons: ...</P>
<BR><FONT COLOR="red">To share my ideas in cyberspace;</FONT>
<BR><FONT COLOR="green">To earn extra income;</FONT>
<BR><FONT COLOR="#0000FF">To learn HTML code; and</FONT>
<BR>To keep in touch with other humans living within the information superhighway!
</BODY>
</HTML> Save your File: go up to "File" and select "Save." Again, without quiting your Text Editor program, go back to your Browser program, and as you see your first simple page, click on "Reload" or "Refresh" at the top part of your Browser program to reload your newer version of your "myhomepage.html" file. Then, you will see the following more vibrant page: Welcome to Mr. V.'s Home Page Hi! Welcome to my home page.  I created this page for several reasons: ...
To share my ideas in cyberspace;
To earn extra income;
To learn HTML code; and
To keep in touch with other humans living within the information superhighway! | Excellent! Notice that the Happy Face is Centered within the line it occupies. Also, see how it blinks? That's because the picture I selected is actually a "gif." This is a special animated picture! You can find many FREE gifs throughout the Internet. I got this one, and many others, from an excellent site: www.animfactory.com. It's a great site to get FREE gifs, borders, backgrounds, 3D Text, and Banners! All FREE!!! Awesome. I will be subscribing to their "3-Pack Deal," where you get thousands of gifs, yadda yadda yadda, you become a member and continue to receive a bunch of other cool stuff...Anyways, back to HTML.
| * * * 10. Appendix A: HEX Color Code Chart * * * | | Cell #11 | Cell #12 | Cell #13 | Cell #14 | | Cell #21 | Cell #22 | Cell #23 | Cell #24 | | Cell #31 | Cell #32 | Cell #33 | Cell #34 | | Cell #41 | Cell #42 | Cell #43 | Cell #44 | Upcoming: Table with 16?-color Grid. Cells with Color along cells with HEX code (along color name?)....Make Appendix Charts stand-alone cells in MENU, above. |
