Where to start you ask? Well, your first task will be to open up a Crimson Editor document, copy the following text, paste it into that document, go to File -> Save As, choose whatever drive your flash drive is, and save this as page1.html.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Click on this image to see an example of where to look:
DO NOT CONTINUE UNLESS YOU HAVE YOUR FILE SAVED AS A .HTML page. To see if it works, go to the Start Menu, My Computer, double click on the Flash Drive and double click on the file. It should open and you should see a blank page so far.
Opening your file to edit
If you do not have Crimson Editor and you would like to open the file for editting, the easiest way would be to use Windows Explorer, double click on the HTML page and go to View -> Source. This should bring up Notepad with the code. You can edit it from here or open the file through Crimson Editor for easier debugging properties.
However, if you have downloaded Crimson Editor from the internet and you want to open your file, it is very similar. Simply run the file, go to File--> Open, then make sure the "Files of Type" selection is "HTML Files...". If you do not make this selection, you will not see your file and thus cannot edit it. At this point, once selected, you can open your file for editing.
Things you MUST know
The first thing you should notice, since it is probably one of the most common mistakes made by any HTML programmer is that for most commands there is a command that closes it, which only differs in that it has a "/" in it.
Second rule of thumb is that everything you want to show up on the screen (pictures, text, videos, etc) should be in between the <BODY> and </BODY> area. It is not important why, but you should practice this as a good programming habit.
The Title
See the title "Tutorial 1" in the blue bar at the top left of your screen? That's why we have the title tag. To personalize this, simply put the word(s) that you want as your title in between the <TITLE> and the </TITLE> tags.
here's an example:
<TITLE>MY PAGE</TITLE>
The BODY
The BODY tag is a very important one. We can do many different things with it. We can change the color of the background with something like this:
<BODY BGCOLOR="RED">
or the text color like this
<BODY TEXT="WHITE">
or both like this
<BODY BGCOLOR="BLACK" TEXT="GREEN">
if you want to put a picture in the background, add BACKGROUND="NameOfPic.gif"
NOTE: We only have one body per page, so if you want to add something different like a background picture, or a different text color to the page, add that attribute to the same BODY tag. Most tags are the same way, if you want to change a picture's size, you add height= or width= to the tag, so that the computer doesn't confuse it with a different picture.
Have you ever noticed how text on some pages is really small while some are really BIG? Well, there are two ways to do this yourself.
The easiest way is probably with the Header Command. It makes text smaller whenever the number in the tag gets bigger. Just look:
<h1>text</h1>
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
The only draw back is the fact that this character automatically ends the line as soon as you use the </h#> (#=1,2,3...) part. But that is but one option. The next and more flexible option would be the <FONT> command.
The FONT command has many different attributes you can set. The first, as we are currently talking about, is the fact that you can manipulate the size of words all over your website. The way this is done is that inside the greater and less than signs of the FONT command, you can add an attribute called SIZE. For example:
<FONT SIZE="1">
<FONT SIZE="2">
<FONT SIZE="3">
<FONT SIZE="4">
<FONT SIZE="5">
Other attributes you might want to change using the FONT tag include COLOR or FONT-FAMILY:
<FONT COLOR="RED">COLOR</FONT>
<FONT COLOR="BLUE" SIZE="5" FACE="COMIC SANS">COMBINATIONS</FONT>
You can also bold letters with the <b></b> command and italicize with the <i></i> command
How about moving stuff around? Well, the simplest way to put something left or right is with the <P></P> command. For Centering, use the <CENTER></CENTER> command. Here are a couple examples.
<P ALIGN="LEFT">Hello</P>looks like:
Hello
<P ALIGN="RIGHT">Hello</P>looks like:
Hello
<CENTER>Hello</CENTER>looks like:
Hello
CHECKPOINT # 1:
Make a web page with a BLACK background and GREEN text with your name size 5 in the middle of the screen. This should take you no more than 5 minutes.
You might also be noticing that different lines in my page have different line spacings as well. There is one command, much like endl or "\n" in C++ or like hitting enter when you are writing an essay. That command is:
<BR>
Unlike most commands in HTML, there is no </br> command needed.
Ok, we're almost done with our journey in web land. The next fun little command is the <HR> command. The results of which are a line that separates things. HR stands for Horizontal Rule and looks like this:
Pictures
So, now that we can put words on our page with pretty colors and different sizes, you are probably waiting to put some pictures on your page. This is fairly easy, IF you have mastered what we've gone through so far. The basic command to put an image to your screen looks like this:
<IMG SRC="NAME-OF-PIC.(GIF or JPG)">
<IMG SRC="NAME-OF-PIC.(GIF or JPG)" HEIGHT="#">
<IMG SRC="NAME-OF-PIC.(GIF or JPG)" WIDTH="#">
<IMG SRC="NAME-OF-PIC.(GIF or JPG)" ALIGN="RIGHT">
<IMG SRC="NAME-OF-PIC.(GIF or JPG)" ALIGN="LEFT">
NOTE: If you use alignment on the pictures you need to put this line of code after the code to clear the alignment:
<BR CLEAR="ALL">
Here's a simple way to remember this tagIMG stands for "image" and SRC stands for "source", both words are simply missing the vowels.
The pictures you will be putting on your page should be saved on your disk to work regardless of internet connection. If you do not know how to get a picture, let's go over the process real quick here.
First, find the picture you would like to put on your page. (HINT: Make sure it is APPROPRIATE! How do ya know if it is or not? If you have to ask the question, assume it is innapropriate!) Next, go to the picture and RIGHT click on it. A menu will come down and the option you want to select is the "Save Picture As". once that is selected, choose the A: and name the file. Be sure to look at what kind of picture it is JPG or GIF.
Here, practice on this: <img src="logo-small.jpeg">
Once again, I stress that you pay close attention to what the extension of the picture is, because there are various extensions available, not even just jpg or gif. The one that is attached is the one that should be used in your IMG tag. Also, you may not want to rename your picture when saving right away, because many computers will get rid of its extension, making it useless for viewing by anyone. If you do not like the name a pic was given, rename it through Windows Explorer by clicking on the file on your drive, pressing F2, renaming it, and pressing Enter.
Links
Lastly, you might be wanting to put links to other pages.
Here are a couple of ways you can do this:
If the page is in the same directory of your disc, just use the name
of that other page. Note: the part between the <a ..> and the </a> parts is the part that will be underlined and clickable as a link. The part in quotations next to href= is the name of the file or site.
Example: <A HREF="Page2.HTML">Page 2</a>
If the link is to a page on a website, enter the whole address, including http://
Example: <A HREF="http://www.yahoo.com">Yahoo!</a>
Note: DO NOT put A: never ever ever. Just name the files in a sequence and make sure everything is in the same directory.
CHECKPOINT # 2:
Make a web page with a BLUE background and RED text with your name size 3 in the middle of the screen and with any 2 pictures you want from the web. You should take no longer than 10 minutes.
Think that's easy huh? Well, there are a lot of places a person can make a mistake when making their page and chances are you might get stuck for minutes trying to figure out why your stuff isn't working right. Well, maybe we should learn how to debug your problems. Here are some simple steps:
1. Did you start your page with the layout that was taught to you in the beginning of this page?
2. With the exception of any BR's or HR's, do all your tags have closing tags with "/"s?
3. If you using attributes like COLOR or SIZE, is the equal sign there and are there quotation marks around the value? (ie. "BLUE","4", etc)
4. If you are trying to put a picture on your page and you get something like this: 
, do you even have a picture on your DISK with the name you have? Are you sure your picture isn't a JPG instead of a GIF?
Final Checkpoint:
Make a page with 3 pictures on the page, one aligned to the left, one to the right, one to the center, and with a small sentence description along with each, but every description should be a DIFFERENT color. Also, at the bottom of the page, put 2 links: One that goes to the page with Checkpoint 1 and the other to Checkpoint 2.