First things first.
I want us all to be using the same environment for this class, so I am going to have you download and install a program called Aptana.
http://www.aptana.com/products/studio2/download
I don't want you to get the Studio 3 Beta, as I am unsure how stable it is, and we want a fully functioning program.
Alright, here we go, diving right in.
Step 1:Install Aptana.
Step 2:
Run the program.
Step 3:
Once on the beginning screen, there will be a "Create New" caption.
Underneath that, is a "Create New File..." - Click on that, and choose Untitle HTML File
(or go to File > New > Untitled HTML File)
Alright, now, you should have a page that looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
What you see there is the very backbone of any website. You can't have a website without any of that. What is it? Its really just a blank page, but what its doing, is telling the web browser that this is indeed an HTML Webpage.
"Doctype"Now, first line of the code, the tidbit about the Doctype, well thats really just pointing out that its an HTML document, and then provides a link to the HTML4 Standards.
HTML4 ? Yeah, The internet people, lol, decided to update how websites work, every now and then. The newest version is actually HTML5, but is not supported fully by ever browser yet. I will be teaching kind of in between 4 & 5.
Think of this as HTML 4.5, lol.
"HTML"the <html> tag, is the start of the webpage. Anything under that is subject to being rendered as HTML.
There is also a </html> Tag at the very end. In Newer HTML standards, HTML is actually called xHTML. What this means is just that every tag must have an ending tag to it. What if the tag is just a single tag item? Well, in example, the line break tag (<br>) turns into <br />
Its fairly simple.
"HEAD"Inside of the <head> tag, there will be more complex, important things, but for now, we will leave it alone. We will touch base on it starting Session 2.
"BODY"This is where things get exciting. Inside of the <body> tag, anything can happen. This is where your visible webpage starts. You can type plain text in there, set up information tables, display an image, or much much better. The body of the page, is what your viewers will be seeing.
Lesson 1: Basic HTML
Now, how do we make them see what we want them to see? With HTML Tags.
What is an HTML Tag?Well, youve seen then above, in the code box.
an HTML tag Starts with a "<" and ends with a ">"
In closing tags, it starts with "</" and ends with a ">"
In example, go to Aptana, and your blank HTML document.
Type this:
<img src="http://img828.imageshack.us/img828/7357/defrocklogo.png" />
Now, the "image" tag, is a single tag item, so you must provide the "/" within the single set of tags.
This is how your HTML document should look now:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<img src="http://img828.imageshack.us/img828/7357/defrocklogo.png" />
</body>
</html>
Now, we are ready to test our first HTML!
Go to File > Save As
name it "index" and use the dropdown menu to choose ".html" (its just personal preference to me).
Save it to your desktop (or anywhere you wish, right now it doesnt mattter)
Now, go to where you saved your document, right click it, and chose "open with"
Then chose the browser that you wish to open it with.
What should you see? A white page with a picture of a rocket.
Alright, very very short lesson, but I have my actual classes to attend to, I have a test to do right now.
I would like feedback, questions, comments, suggestions, etc.
Later on in the lessons, is there anything in particular that you would like to learn or spend more time on exactly? Let me know!
I expect you to have read this and be done with session 1 before Wednesday.
Session 2 will be on Thursday, Feb 3rd.
Member
