|
|
|
|
|
|
With that out of the way I can say with confidence that you are less than 5 minutes away from making your first web page!
Start up Notepad and start with this... <HTML> </HTML> Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as talking to the browser, or better yet giving it instructions. What you have just told the browser (more or less) is this is the start of a HTML document (<HTML>) and this is the end of a HTML document (</HTML>). Now we need to put some stuff into it. Every HTML document needs a pair of HEAD tags. <HTML> <HEAD> </HEAD> </HTML> The only thing we have to concern ourselves with in the HEAD tags (for now) are the TITLE tags. <HTML> <HEAD> <TITLE></TITLE> </HEAD> </HTML> And the bulk of the page is going to be within the BODY tags. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> Oh, and one more thing, give your document a title, and put something in the body. <HTML> <HEAD> <TITLE>My big ole bad page!</TITLE> </HEAD> <BODY> Hello Joe! </BODY> </HTML> Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If yer a little fuzzy about how to do this then here's what you do... In your Notepad window click File then Save As.
Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation! If you are using Internet Explorer or Netscape, the file you made might look something like this...
You should be able to double click on it now and see the results of your handiwork. Next order of business is to start putting some neato stuff in your page. The best way to use this tutorial is to run Notepad and two instances of your web browser. One browser window containing this tutorial and the other containing your new page. Just toggle between the three windows. You can open a second instance of your browser in one of two ways- 1) Find the icon of the html file you just made (page1.html) and double click on it. Or- 2) In your browser, click on File/Open File (or something similar to that) and browse to the file (page1.html). Two quick points before we go on to lesson 2. One, what you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. And two, the document title is what appears at the very top of the browser window. To keep things a little cleaner I am only going to write what is in the <BODY> tags. I will omit the <HTML>, <HEAD> & <TITLE> tags. Needless to say, keep these in your document.
<BODY> </BODY> Type something really cool.
<BODY> Something really cool </BODY>
IMPORTANT NOTE:
Whenever you make a change to your document, just save it, then hit the
Refresh/Reload button on your browser. In many instances just hitting the
refresh button doesn't quite do the trick. In that case... I think the first thing we are going to learn is how to change background colors.
<BODY BGCOLOR="#CCFFCC"> Something really cool </BODY>
CCFFCC is computerese for light green. Here are a few more. You can specify a background image instead. (Note, the image should be in the same folder as your HTML file. More on this below.)
<BODY BACKGROUND="swirlies.gif"> Something really cool </BODY>
Here's the background image In order for the image to show up, the browser has to be able to find it. For now, we want the image to be in the same folder as your HTML document (page1.html). The easiest way to do this is to right click on the swirlies image above and choose Save Image As (or some variant thereof). Browse to wherever you put page1.html and save the image there. Later we'll get into this stuff in a little more detail. It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this...
<BODY BACKGROUND="bluebar.gif"> Something really cool </BODY>
Here's the background image
Let's go back to a plain old screen.
<BODY> Something really cool </BODY>
We can make things bold.
<BODY> Something really <B>cool</B> </BODY>
What we are (more or less) telling the browser is: at the <B> start making things bold, and at the </B> stop making things bold. The same principle applies to italics...
<BODY> Something <I>really</I> <B>cool</B> </BODY>
...and underlining.
<BODY> <U>Something</U> <I>really</I> <B>cool</B> </BODY>
Back again to a plain screen.
<BODY> Something really cool </BODY>
We can use tags in combination if we want to.
<BODY> Something really <I><B>cool</B></I> </BODY>
This is an example of nested tags. If you are going to use tag pairs in combination (which you will probably be doing quite a bit), then to avoid confusing the browser, they should be nested, not overlapping. Let me illustrate... <THIS><THAT>cool</THIS></THAT> Overlapping
tags.... bad A very useful type of text effect is the mono-spaced font, or Typewriter Text.
<BODY> <TT>Something really cool</TT> </BODY>
Each letter uses the same amount of horizontal space...
We can change the font size too... It's pretty easy! First add the <FONT> tags...
<BODY> Something really <FONT>cool</FONT> </BODY> Then specify a SIZE attribute.
<BODY> Something really <FONT SIZE=6>cool</FONT> </BODY>
Fonts come in 7 sizes:
Two things I want to discuss now. First, a <TAG> tells the browser
to do something. An ATTRIBUTE goes inside the <TAG> and tells
the browser how to do it. Every browser has a default font setting - font name, size and color. Unless you have messed with it the default is probably Times New Roman 12pt (which translates into 3 for our purposes) and it's black. Of course we can specify font names other than the defaults. Like ARIAL and COMIC SANS.
<BODY> Something really <FONT FACE="ARIAL">cool</FONT> </BODY>
The font will only display if your viewer has that font installed on their computer. Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Impact!. You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do something like this... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>. For lunkheads like me that might not understand that right away, here's what's happening- The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font. What are some common fonts that are pretty safe bets? Andale Mono
Arial Arial Black
To see how various fonts might look through your browser, you might want to use the Handy Dandy Font Viewer Now I guess is a good time to yap a bit about syntax. You notice here and there I use quotation marks, these are important. Whenever you have an ATTRIBUTE="value", the value should really be in quotes. It's a good habit to get into. (as you work through these tutorials you'll see it's a habit that I haven't quite developed completely :-) You have no idea how many times I made a page and it was all screwed up... I mean all screwed up because of a single missing or misplaced quotation mark or a missing space or a missing greater than > sign . Someday we will be separated from this kind of coding, but for now we just have to be careful. Another thing is my use of CAPITAL LETTERS for most of my marking up. This is just personal preference. I find that the tags stand out more when using all caps. You could just as well use <font> instead of <FONT>. You can even use <fOnT> if that's what trips yer trigger. HTML is largely case INsensitive. Alright, back to the fun stuff... You can change the font color if you like.
<BODY> Something really <FONT COLOR="#FF0000">cool</FONT> </BODY>
We can, of course use more than one ATTRIBUTE in a <FONT> tag...
<BODY> Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT> </BODY>
Oh boy we're on a roll now!
<BODY BGCOLOR="#FFFFFF"> Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U> </BODY>
I feel the need to point out once again that multiple tags should be nested. <TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3> It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as... <TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2> The fastest way to confuse the browser, not to mention yourself is to overlap the tags... <TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2> (I couldn't think of a way to explain it so I hope the use of examples makes it clear.) Another occasionally useful tag worth mentioning are section headings. While they're a little obsolete in today's very graphic web, they are still a handy little thing to have in your toolbox. They come in sizes 1-6.
<H1>Something really cool</H1> <H2>Something really cool</H2> <H3>Something really cool</H3> <H4>Something really cool</H4> <H5>Something really cool</H5> <H6>Something really cool</H6>
A useful heading attribute is ALIGN... fairly self-explanatory.
<H2 ALIGN="left">Something really cool<H2> <H2 ALIGN="center">Something really cool<H2> <H2 ALIGN="right">Something really cool<H2>
One more thing and we'll wrap up this lesson. The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...
You can change these if you need to (notice I said need to). The whole world has gotten used to links being blue. Why confuse us? You can change these defaults for the entire document in the <BODY> tag.
<BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66" VLINK="#00BB33" ALINK="#00CCFF"> Something really cool </BODY>
I've written a neat little HTML & JavaScript widget called Color Picker that makes it easy (and kind of fun) to experiment with different color settings. With it, you can not only pick colors, but you can choose different fonts and font sizes, switch to bold or italic, and even easily experiment with different background images. The <BODY> tag is automagically generated for you. There! You now know just about everything that has to do with manipulating
the text in your document. You can now make Big
red letters or small bold letters You can
use other Fonts, or monospaced fonts. (Coding for the roller coaster is here if you want to see it.) Before we wrap up this lesson, there's one little thing I want to bring to your attention. You can view the HTML code of any page you happen to be viewing by choosing View/Document Source in your browser. Your browser may word this a little differently, but nearly all browsers have this facility. So, as you surf along and you run into a really neat page and you find yourself thinking "How'd they do that?", the answer is only a couple clicks away. I think we'll start by learning something about the way a browser works. First an example...
<BODY> Something really cool like an icecube! </BODY>
<BODY> Hey! What's going on here?? </BODY>
The browser doesn't recognize formatting. Unless you tell it otherwise, it just displays the characters in a steady stream. If you want to start a new line you have to use a line break.
<BODY> Hey! <BR>What's <BR>going <BR>on <BR>here?? </BODY>
<BR> basically says - start a new line. Can you use the <BR> tag to skip a line? Sure.
<BODY> <BR>What's <BR>going <BR> <BR>on <BR> <BR>here?? </BODY>
Skip lots of lines? You betcha.
<BODY> <BR>What's <BR>going <BR> <BR>on <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>here?? </BODY>
Let's go back to our simple page.
<BODY> Something really cool </BODY>
This is the paragraph tag. Think of a paragraph as a block of text.
<BODY> <P>Something really cool</P> </BODY>
By itself it doesn't do much. Although with most browsers, starting a new paragraph does have the effect of skipping a line.
<BODY> <P>Something really cool</P> <P>like an icecube</P> </BODY>
So, what else is this <P> tag good for? Well, it's great for aligning stuff.
<BODY> <P ALIGN="left">Something really cool</P> <P ALIGN="center">like an icecube</P> <P ALIGN="right">or a popsicle</P> <P ALIGN="left"> Something really cool <BR>like an icecube <BR>or a popsicle </P> <P ALIGN="center"> Something really cool <BR>like an icecube <BR>or a popsicle </P> <P ALIGN="right"> Something really cool <BR>like an icecube <BR>or a popsicle </P> </BODY>
Something about the <P> tag... although in the examples above I used
a closing tag (</P>), it is not entirely necessary. Nearly all browsers
will assume that when a new
<P>Some stuff <P>More stuff is the same as...
<P>Some stuff</P> <P>More stuff</P> And one more thing before we move on, earlier we were talking about centering things. There's another way to center something that should definitely be in your bag of tricks. It's pretty self-explanatory. You can center one word or your whole page. Everything betwen the <CENTER> tags gets centered.
<BODY> <CENTER>Something really cool</CENTER> </BODY>
Have a look at this...
<BODY> Something really cool </BODY>
The browser won't recognize more than 1 space. I know at first this might all seem pretty stupid for it to be this way, but really, it's better like this. It gives you absolute control over the document's appearance. There is a nifty little code that means "space" to the browser -> Try this instead...
<BODY> Something really cool </BODY>
The & means we are beginning a special character the ; means ending a special character and the letters in between are sort of an abbreviation for what it's for. There are quite a few of these special characters. Here are six more. (Note- these should always be lower case)
non-breaking space
< < less-than symbol
> > greater-than symbol
& & ampersand
" " quotation mark
­ soft hyphen
You don't need to use them all the time, just when typing the real character would confuse the browser. How do you know when that is? No hard and fast 'rule' that I can think of. It will just come with a little practice and a few screw-ups. By the way, some thoughts on mistakes & screw-ups. There are those that are of the opinion that mistakes are bad. They are afraid to try anything new for fear of messing it up. Making the same mistake over and over might be a little dumb, but especially while you are learning, don't be afraid to screw everything all up. Mistakes are our friends :-) If you are not screwing something up then you are not learning anything and probably not doing anything. Remember, messing things up is a perfectly acceptable part of learning! OK, enough babbling. There are other special characters too. You'll probably hardly ever use them but I want you to know they are there. Let's go over the last couple points real quick because if you're at all like me, it will get confusing. The browser will dispay your text in a steady stream unless you tell it otherwise with line breaks, etc. It will reduce any empty areas to 1 space. If you want more spaces, you must use the space code ( ). Here's a tidbit that we didn't cover... If you hit Return (or Enter) while you are typing, most browsers will interpret that as a space... unless there is already a space there. One more quick example.
<BODY> Something<BR>really<BR>cool<BR> like<BR>an<BR>icecube! </BODY>
for any problems or suggestions please email me
|
Mac
Users: SimpleText is the default text editor on the Mac. Mac users
eventually might want to download
