Or at least trying to understand HTML!
When I was a teacher, before the birth of my third child, I really enjoyed my sixth grade Computer Technology class. Each grade level, like my sixth grade class, conquered a different topic in technology; fifth graders learned about computer hardware, while fourth grade learned how to type efficiently and to use the computer as a presentation tool. The sixth grade year was all about the Internet.
Did you know?
That the Internet and the World Wide Web are two separate items? In fact the World Wide Web is just one of the 5 components of the Internet. For your knowledge and well-being, the other components are: FTP, email, Usenet Groups and instant messaging. Want to learn more? Click here to see what I would read over with my class. In fact, here is the Web Quest that I used with my classes.
So why learn, or at least try to understand html? Can’t I just cut and paste or use WYSIWYG (What You See Is What You Get) products such as Dream Weaver to create what I need and get by? Well, you can, but knowing even basic html helps a lot. For example: the “Share the Love and Grab My Button” on my blog originally had an error in its code. (Thank you to the fellow bloggers who pointed it out to me that my button didn’t work- I feel foolish, but we learn from our mistakes!) What went wrong? Where the html “called up” my Web link, the one forward slash was simply missing. That was it and that’s all it takes! This is where knowing even the basic html is a big help!
The Basics (or the “what you need to know before you begin”):
- · Each set of directions is called a ‘tag’. Each tag set is placed in between the greater than and less than signs < >. Most tag sets need an ending tag set to function properly </ >. You know when a tag set is closed when you see the forward slash symbol. See you’re a pro already!
- · It does not matter if the code is upper or lower case because it is not case sensitive!
Most Used HTML Tags- click here for a quick copy print out!
Tutorial 1: The Basics
So….. Let’s put theory into practice- shall we?
1. Open up the Notepad Program from your desktop. In Microsoft you would go to Start --> Programs -> Accessories --> Notepad.
2. Let’s start our Web page! So you can practice what the tags say and mean, please type them in. Yes, this means NO cutting and pasting- we want to learn this right? So type this into Notepad:
<TITLE>I am Learning Basic HTML</TITLE>
<CENTER><H1>My Beginner Web Page</H1></CENTER>
3. Can’t wait to see what it does? Save it as Example.html and then save it again as example.txt (Note: you need to type in “.html” in order for it to save as a Web page. You saved a text version of this as well so you can continue to work.) For right now it does not matter where you save it to- so go ahead and save it to your desktop for easy reference! To view it as a Web page double click the icon that says example.html (depending on what your default browser is, it could be an "e" for Internet Explorer or the "fox" for Firefox.
NOTE: Click on the image for a larger view.
4. So let’s add a photo to our page. We are going to add the image code right after our title “My Beginner Web Page.”
You first need to gather a photo. I am going to use mine from a Web site, my blog button for example. Use the tag set that you received that the beginning of this tutorial in the quick copy print out.If you are using an image from your computer, you must make sure it is located in the same folder as your html document! If you simply saved it to your desktop for practice, just make sure the photo is on your desktop as well. (Please Note: Once you move the location of either your html document or photo- you need to relink unless they are moved into the same location together!)
5. Now, let’s add a Horizontal Rule <hr>, a line break <br>, and then the text “I am so excited to be finally learning the basics of HTML. I think that I am starting to get the hang of this!”
6. Can’t wait to see what it does? Save it as Example.html and then save it again as example.txt Just click "Yes" if it asks you if you want to replace the file? At this point, if you have any problems and are not seeing something that looks like this:
Then it is time for you to go back and double check your code. Remember to close the tags that need a closing!
7. Everything good so far? Great! Let’s add an email address! Can you see where it is in my example below? Add the code you see from my example (or the code packet from the beginning of this tutorial) in your Notepad document and use your email address!
8. Did you notice the extra break in there? No? Look at the photo above. It is right before the email tags- now add it to yours Web page! (<br>)
Great job for today! You just made your first Web page! Stay tuned for the next tutorial on Learning Basic HTML! We will be changing fonts, color and learning a few more HTML tags.
UPDATE 2/14/2011- I noticed that my examples all are centered completely. To achieve this, just change the </CENTER> tag at the end of the last sentence or before the </BODY> tag. By default the alignment is set to the left.