Learning HTML

| Introduction | Getting Started | Building your site | Online Resources | Helpful Tips |
Introduction

HTML means hypertext markup language and it is the code, the language of web pages. FrontPage is a web editor; it is easy to learn. But to really be a tech savvy web designer, you need to know something about html.

The other great benefit to knowing html is that you can create a web site even if you don't have FrontPage or another web editor. So if you wanted to make a web page at home this summer and thought you couldn't because you don't have the software, now you can.

So for the next couple of days, you can try your hand at creating a web page from scratch. Think of this as the difference between baking a cake with a mix, where all you do is add eggs and water, to baking a cake from scratch where you measure and mix all the ingredients yourself.

Learning any new skill can be awkward at first, but you'll get better at it.

The process of learning involves cause and effect (doing something and seeing the result work or not work) and then problem solving.

About HTML:

  • HTML (Hypertext Markup Language) is the basic language/code of web pages.
  • An html sentence includes tags and attributes. Attributes are the values and description of effect on the tag. Size and color are attributes, for example. In html sentences, syntax matters. That is, the order of the tags is important. 
  • Also, be careful when you type your code. Little mistakes have big (frustrating) results.
  • Tags look like this: <body> is the opening and </body> is the closing. Most tags come in pairs.
  • To better see one of your html documents, go to your index page and click on the html tab. Look for tags < > & </> and attributes, which are something like p align= "center" (makes the text aligned in the center). You can also click on View: Source in the IE browser. This gives you the code of any web page out there.
Getting Started
Start Notepad.

Type in the following text (no errors; 100% accuracy):

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

Save the file as "mypage.html". Be sure you change to "all files" before you save. Save this page in your h:/ drive. Try keeping out of a folder for easier access.

To open and view your page in IE, open Internet Explorer, and click "Open," the "Browse." When you get to that file, double click on it so the file name shows in the box. Then click "Okay." You should see your new web page now. (This option does not work in school for SF students)

OR

Get to your H:/ drive by going to Start, Documents, My Documents. Find your file and double click on it. Leave the IE window open and refresh it each time you make changes.
Building your site

We are going to use information from the W3 Schools website. There are many other online resources that will help you learn html and later other, more advanced web editing code if you're interested. The great thing about all of these sites and tutorials is that they're free.

Your goal is to create a site that has a heading, a colored background, an image, three links to sites that interest you (and are school appropriate) in a bulleted list. Extras: try creating a table that you put your links in. There is no end to the extras you can try.

Show me the results when you're done. The grade is for effort!

Basic Tags

Images

Color

There are 16 colors that you can use based on their name. All others have a six "digit" code that starts with a # sign. For example, the purple of this page is #6C6CAE.

Color codes online:

Links

<a href="url">Text to be displayed</a>

Web safe fonts:

  1. Arial
  2. Arial Black
  3. Courier New
  4. Comic Sans
  5. Georgia
  6. Impact
  7. Times New Roman
  8. Trebuchet
  9. Verdana 
 
Online Resources

Helpful Tips

  • Save images in your h:/ drive; keep them out of folders. Be sure you know if your image is a .jpg or a .gif. It matters and you need that information.
  • Copy and paste urls.
  • Think of your document as a football field with the <html><body> beginning and end tags </body></html> as your goal posts. Put everything else out on the field between these goal posts.