[prev]HTML (attributes)[next]

The text between the HTML open-tag and the close-tag is sometimes called the "content" of the tag. A tag can also have attributes. For example, a <font> tag can have a color attribute.

Example: Colorful HTML

 
1
2
3
4
5
6
7
8
9
10
11
12
print(html("""
<p>
  <font color="blue">
    Don't have the <b>blues</b>.
  </font>
</p>
<p>
  <font color="orange">
    Orange you glad you know HTML?
  </font>
</p>
"""))

Click to run the code.

The two <font> tags in the example above have color="blue" and color="orange" attributes, respectively. These attributes modify the style in which the content is displayed, just like the <b> and <i> tags we discussed in the last chapter.

Anatomy of an HTML Tag

Anatomy of the HTML tag.

As we mentioned in the last lesson, the best way to learn HTML is through experimentation. You can view the HTML of any page on the internet through the "View" menu in your browser. Depending on which browser you're using, you will select "Page Source", "View Source", or just "Source" from the "View" menu.

Try viewing the HTML source to this very web page! It may look cryptic, but with some practice you'll quickly be able to understand most of it.

Example: More HTML

 
1
2
3
4
5
6
7
8
9
10
11
12
print(html("""
<p>Three items:
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
...and an image:
<img src="http://appjet.com/img/justplane.gif" />
<p>...and a link:
<a href="http://www.google.com/">Google</a>
"""))

Click to run the code.

Note the pure HTML ways of creating images (img) and links (a). AppJet commands like printp, image, link, and form are conveniences that allow you to avoid writing HTML code in common cases.

Exercise: Make the list numbered. Change the ul (unordered list) tag to an ol (ordered list) tag. Be sure to change the close-tag as well as the open-tag!

Exercise: Clean up the code. Notice that the p tags aren't closed, and the text "...and an image" isn't even a paragraph, though it ends up on its own line because of the list before it and the paragraph after it. Web browsers are lenient about HTML, but web developers often find it helpful to keep high standards anyway. For this exercise, add in the additional occurrences of <p> and </p> so that all "paragraphs" start and end appropriately. At the top level, your code should look like "paragraph, list, paragraph, paragraph".

That's it for HTML! There are lots of good resources out there for anyone wanting to learn HTML, just do a quick google search. Many HTML tutorials will teach you about a few extra tags that surround all your HTML code, like <html> and <body>, but AppJet takes care of that for you so you can focus on building your page.

How do I put a plain "<" in my text, without it becoming a tag?

Instead of typing <, type &lt;, which is the special code for the "less than" sign.

There are several punctuation characters that need to be written specially in HTML code, and other characters (letters and symbols) for which it's convenient. Some common characters and their codes are &, the ampersand (produced with &amp;), and < and > (produced with &lt; and &gt;) respectively. &copy; is another fun one — try it and see what it outputs when you type it in the example above. Using the special "&whatever;" codes is called "escaping" the special characters.

To find a complete list of special characters and how to produce them, just do a google search for "html entities".

Previous Lesson: HTML (tags) Next Lesson: Web 2.0 Madlibs