Chief 30 Report post Posted February 1, 2011 (edited) 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. Edited February 1, 2011 by Chief Share this post Link to post Share on other sites
Marked 197 Report post Posted February 1, 2011 Nick work Chief, I can you see you put a lot of effort into the first tut and it looks nice and organized. From reading it, I would also suggest a future tutorial on SEO. For example, including title='' and alt='' in the IMG tags. Also an idea for future tutorials could be a list of thingies you can use in the tags, so members can come back to the topics for reference. For example: Share this post Link to post Share on other sites
madanchi 18 Report post Posted February 1, 2011 (edited) nice lesson :) Basic coding but that's the best way as I didn't even know this before. so I'm happy, and it was very easy to follow and understand. Good job :) Edited February 1, 2011 by madanchi Share this post Link to post Share on other sites
Dark Den 4 Report post Posted February 1, 2011 (edited) The program is gonna take me around 1 and a half hours or more to download <_< But i am gonna try it anyways, will post back if i was able to download it. The tutorial was pretty great. It was easy to understand and follow :alright: Cant wait for the rest of the tutorials. And another good thing is now i dont have to study this for my exams :biggrin_002: EDIT: i got it to finish downloading,gonna check it out later gonna sleep now Edited February 1, 2011 by Dark Den Share this post Link to post Share on other sites
Chief 30 Report post Posted February 1, 2011 If anyone is having trouble with Aptana, let me know. I will give instruction in my lessons on what to do in notepad. Messier, but just as effective. Share this post Link to post Share on other sites
rgangsta 43 Report post Posted February 1, 2011 I am. My brother doesn't want me downloading programs on his pc. Can I use notepad? Share this post Link to post Share on other sites
madanchi 18 Report post Posted February 1, 2011 I am. My brother doesn't want me downloading programs on his pc. Can I use notepad? ypu might be able to use Front Page or Expression as it's now called - if your bro has that Share this post Link to post Share on other sites
Chief 30 Report post Posted February 1, 2011 I am. My brother doesn't want me downloading programs on his pc. Can I use notepad? Go into notepad, copy the code from the main post, then save the document as "index.html" Its essentially the same thing, I just prefer having a program. If you need further assistance, let me know. Share this post Link to post Share on other sites
rgangsta 43 Report post Posted February 1, 2011 My brother has Adobe Dreamweaver on his pc. I can use that instead right? Share this post Link to post Share on other sites
Chief 30 Report post Posted February 1, 2011 Yeah, and I'm more familiar with dreamweaver, so I can help you through specific problems, if they come across. Share this post Link to post Share on other sites
Arkbennett 16 Report post Posted February 1, 2011 Can I use Dream weaver ? Share this post Link to post Share on other sites
Chief 30 Report post Posted February 1, 2011 Sure. New Rule, if you have dreamweaver, use it. If not, use Aptana. If you cant download things, use Notepad, but let me know that you are, so I can make things a little simpler for you. Share this post Link to post Share on other sites
Bob423 52 Report post Posted February 3, 2011 sorry cant install that, not enough space on my computer, but i have pagebreeze, downloaded it 2 days ago Share this post Link to post Share on other sites
isaacsol 10 Report post Posted February 3, 2011 I'm using DW CS5, for the record. Share this post Link to post Share on other sites
Chief 30 Report post Posted February 3, 2011 sorry cant install that, not enough space on my computer, but i have pagebreeze, downloaded it 2 days ago I want you to either use notepad, or make room for aptana. If you dont have enough space, you should be making room anyways, its not good for your harddrive to be so full. Pagebreeze is fairly sucky, I don't want you to use it for this class. Share this post Link to post Share on other sites
Bob423 52 Report post Posted February 4, 2011 (edited) ok, i have a small computer anyway in terms of hard drive space. edit: i uninstalled Civilization III, the biggest program on my computer, so i have enough space now. i play Civ2 more than Civ3 anyway Edited February 4, 2011 by Bob423 Share this post Link to post Share on other sites
Chief 30 Report post Posted February 4, 2011 Alright awesome. Session 2 is being delayed until Tomorrow, the 4th. Sorry, I'm just in the middle of some huge website I'm building, and I can't stop now, I'm on a roll, lol Share this post Link to post Share on other sites
