Lesson 1 Start notepad and type this: Put something in the title and body areas, like so. Welcome To my homepage. Now save it as a .html file. To do this, click file in the notepad window, then save as. Where is says filename, name it page1.html. Where it says save as type: make sure it says All Files(*.*). Hit enter and it's saved. To view your page, open the saved html file. To see any changes you make to it, hit the refresh/reload button at the top of your browser. So keep the tutorial window, your notepad, and your new webpage open. To make things easier I'm only going to write what's in the tags. I will omit the , & tags. Needless to say, keep these in your document. When you see tags with new stuff, make these changes in your text document(notepad) and hit refresh/reload. Add any new tags in when I do. Put them in the same place/way I do. Background color: <BODY BGCOLOR="#FF0000"> Welcome </BODY> For more colors, go here. <BODY BACKGROUND="imagename"> Welcome </BODY> This is to have an image as the background. Just type the image name (something like image.jpg) where it says imagename. Other kinds of images are .jpeg, .gif and .bmp. Be sure to put the full filename in. <BODY BGPROPERTIES=FIXED> </BODY> This will keep the background fixed. But this only works on explorer browsers. <B>Bold</B> Put these tags around any words to make them bold. Put the starter tag in front of the word/s you want bold, and the ending tag at the last word you want bold. <I>Italics</I> Put these tags around words to make them appear in italics. <U>Underlined</U> Put these around words you want underlined. <I><B>Bold Italics</B></I> You can combine tags if you want, go ahead try it. Always make the tags nested, not overlapping. <THIS><THAT></THIS></THAT> Overlapping tags.... bad <THIS><THAT></THAT></THIS> Nested tags.... good <TT>Typewriter Text</TT> Typewriter, or monospaced tags. Each letter uses the same amount of horizontal space... This is regular type -> iiiiiiiiii oooooooooo mmmmmmmmmm This is monospaced type -> iiiiiiiiii oooooooooo mmmmmmmmmm <FONT SIZE=1>cool</FONT> Font size. Fonts come in 7 sizes: teeny tiny small regular extra medium large real big & yelling! 1 2 3 4 5 6 7 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. Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will still be 3. 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. <FONT FACE="ARIAL"></FONT> </BODY> The font you specify will only be displayed if the viewer has it installed on their computer. If the font isn't installed, the browser reverts to the default. So, try not to put rare fonts on your page. Safe fonts: Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times Rew Roman Trebuchet MS Verdana 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. I learned HTML as my first language just to develop good habits. Alright, back to the fun stuff... Changing font color... <BODY> Changing the <FONT COLOR="#FF0000">font</FONT> </BODY> You can use more than one attribute in a <FONT> tag... <BODY> More changing the <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">font</FONT> </BODY> <BODY BGCOLOR="#FFFFFF"> Pick up <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">milk </FONT> </B></I></U> </BODY> P>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.) How about headings..... <H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> Here is a really small heading You may want to align your heading... <H4 ALIGN="left">Left align yer heading</H4> <H3 ALIGN="center">Center yer heading</H3> <H2 ALIGN="right">Right align yer heading</H2> Left align yer heading Center align yer heading Right align yer heading Now, to start a new line(line break tags) <BODY> <BR>Start <BR>a <BR>new <BR>line </BODY> If you don't do this, your browser just makes everything go in a line, like this... Start a new line To avoid this use the line break tags, OK? OK. <BODY> <BR>Can <BR>I <BR> <BR>Skip <BR> <BR> <BR> <BR> <BR> <BR>a line? </BODY> Paragraph tags.... <P>Hey dude!<P> <P>What?<P> This makes paragraphs. See? You can align paragraphs too... <P ALIGN="right">Paragraph1. <P ALIGN="center">Another paragraph. <P ALIGN="left">Yet another paragraph. When using the paragraph tag, you don't need an ending tag. When it comes to spaces, your text editor compresses all spaces into 1 space. So use this for heaps of spaces... Here are more special characters.(Always lowercase) non-breaking space < < less-than symbol > > greater-than symbol & & ampersand " " quotation mark soft hyphen More (mostly useless) special characters. But you wanna center your work, you say? Ok then here... <CENTER>I wanna center my stuff</CENTER> Maybe you wanna make a list.... <BODY> <UL> <LI>Milk <LI>Bread <LI>Butter </UL> </BODY> Milk Bread Butter Purty cool, huh? You want an ordered list, you say? Ok then, here. <BODY> <OL> <LI>More milk <LI>More bread <LI>But no butter </OL> </BODY> 1.More milk 2.More bread 3.But no butter Still want more lists? How about a defenition list. <BODY> <DL> <DT>Aardvark <DD>A burrowing, ant-eating African mammal. And, as everyone knows, the first word in every self-respecting dictionary. Did you know there's such a thing as an aardwolf? </DL> </BODY> Aardvark A burrowing, ant-eating African mammal. And, as everyone knows,the first word in every self-respecting dictionary. Did you know there's such a thing as an aardwolf? <BODY> <BLOCKQUOTE> Write a whole lot of stuff in here. </BLOCKQUOTE> </BODY> Write a whole lot of stuff in here. Ever wondered how people do this... ///\\___ (@ @) +----oOO----(_)-----------+ | Thanks again | | Joe | | Barta | +-----------------oOO-----+ |__|__| || || ooO Ooo Normally It would look like this ///\\___ (@ @) +----oOO----(_)-----------+ | Thanks again | | Joe | | Barta | +-----------------oOO-----+ |__|__| || || ooO Ooo But here is how you stop that. <PRE> Thses are called the preformatted tab. What ever you do in between these will stay that way. <PRE> Although, for some reason, my notepad seems to sometimes preformat stuff, and sometimes not preformat stuff. Wierd.... Here is a tag I rarely use.  What ever goes in here will not show up in your browser, only in your text editor. Here is a tag I use all the time. <HR> You can align it. <HR Align="center"> <HR WIDTH=100%> <HR SIZE=1> We can combine too. Put NOSHADE in to make it solid. Now for pictures. Here is the tag. <P Align="center"><IMG SRC="vegeta."gif WIDTH=130 HEIGHT=80> As you can see, in order to align the picture, you must use the paragraph tag as I have. You also don't have to specify width and height, but it pays to. otherwise, just remove them from the tag. The alt tag is used when a persons browser has picture loading disabled or they are using a text only server. It is a substitute for the image. Also, put the picture you want in the same folder as your page. folder. If the picture is in another folder, or another server, simply go to the picture. Then copy what is in the address bar into the part after the SRC=" part of the tag. Also, make all file names lower case, especially when using unix. Just trust me on this, OK? This is the last part of the tutorial. Links. Do this: <BODY> Go to <A HREF="www.espn.com">ESPN</A> </BODY> Then add the tag <BODY> Go to ESPN. </BODY> The A is the anchor, the HREF ( I think it means hyper reference) tells the browser where to go. Simple, huh? A link for email is handy, too. <BODY> <A HREF="mailto:">Write me</A> </BODY> <BODY> Write me </BODY> By the way, in case you were wondering(I was till I found out from Joe)URL stands for Universal Recource Locator. That's a big fancy phrase that the computer people came up with. They tend to do that alot. A URL is just an address. Well that about does it for basics. See ya round in my next tutorial. Acknowledgement.(email me if I spelt that wrong) Joe Barta. He writes great tutorials