2/02/2011

Technology Tutorial: Learning Basic HTML

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!

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:
<HTML>
<HEAD>
<TITLE>I am Learning Basic HTML</TITLE>
</HEAD>
<BODY>
<CENTER><H1>My Beginner Web Page</H1></CENTER>
</BODY>
</HTML>

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.

4 comments:

  1. This is sooo awesome! Thanks so much for taking the time to write up this awesome tutorial! I can't wait to start practicing! I would love to share this post with my readers too if you don't mind! Thank you, thank you, thank you, this is so exciting. I will do the tutorial with my 13 year old son. It will be fun to learn it together! :) I might as well be a fourth grader when it comes to my computer knowledge!

    ReplyDelete
  2. You're Welcome! And of course feel free to post it for your readers- that's why it is there- to be shared. Make sure to come back next week when I will be teaching about Web Colors, font and I think we will take a look at the code behind those awesome advertising buttons!

    Have fun- my 6th graders loved building their Web sites from scratch. It can be daunting at times, but once you understand the basics- the rest is just downhill!

    ReplyDelete
  3. Thanks so much for doing this! I have put up a button but am waiting to see if it works yet (I did a google search and found directions for making the button, etc. and attempted to follow them. I have no real idea what I'm doing. I'm so glad to have something now to read to try to understand more!

    Since you're into computers and art, have you done much graphic design? I'm going to tell our art teacher about your blog also because you have some great projects.

    ReplyDelete
  4. You're welcome! I designed Web sites for a few schools in my area- and have taken numerous classes in college. I designed my own blog- the "mom" graphic in my header was created by me. Next lesson- will look more into the code behind the button and how to change the background etc. Anything else? I will take requests- I miss teaching!
    I love the support that I am receiving- you all just made me smile ;-)
    Enjoy the Super Bowl!

    ReplyDelete

I love to hear from you! Thank you for your thoughts!

Want to keep the conversation going? Make sure you select "Email follow-up comments to:" and continue the fun!

Aimee ~Classified: Mom

Related Posts Plugin for WordPress, Blogger...

Share the Love! Thanks