Text and list tags (and a few others)

Here are examples of some of the basic (X)HTML tags.

We'll experiment in class with this fanciful research paper.. What methods do you know to download pages/graphics/links/files?

Readings

Castro, 5th edition, Chapt. 3, pp. 59-66, 70-72; Chapt. 4, pp. 73-77; Chapt. 13, pp. 203-207 or

6th edition, Chapt. 3, pp 59-62; Chapt 4, pp 69-73; Chapt 15, pp 215-219.

See Appendix A in either one for a reference to many tags.

Tag Lingo

<p align="right">A right-justified sentence.</p>

p is the tag name.
align is an attribute of the tag.
right is the value of the align attribute.

Simple formatting tags

bold - bold
italic - italic
<tt>typewriter text</tt> - typewriter text
<del>struck-through text</del> - ~~struckthrough text~~

Combine more than one effect, but nest tags appropriately....

bold and italic - bold and italic

Tags that force a line break

Paragraph

<p [align="left" | "center" | "right"] > .. </p>

Headlines

Headline tags force a line break. The text is also automatically made bold, and typically larger than normal.
Note: The smaller the number used in the tag, the larger the final headline size.

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>

Line break

No terminating tag!

<br />

Lists

Unordered lists

<p>A list of my favorite milkshake flavors</p>
<ul [type= "disc" | "circle" | "square"] >
  <li>Papaya</li>
  <li>Chocolate</li>
  <li>Zapote</li>
  <li>Vanilla</li>
</ul>

Useful for enumerating things where order is not important.
<li> is to remind you of list item.
"disc" creates diamond-shaped bullets
"square" creates square bullets
"circle" creates outlined circle bullets

Ordered lists

<p>A list of Michael Neumanns favorite milkshake flavors</p>
<ol>
  <li>Chocolate Chip Cookie Dough</li>
  <li>Chocolate</li>
  <li>Cookies and Cream</li>
  <li>Peanut Butter</li>
</ol>

Ordered Lists are useful for organized lists
Can be used as numbers, letters, or roman numerals

Other kinds of HTML things

Comments:

<!-- A reminder to yourself -->
 
<!-- Or a way to render useless a whole bunch of other HTML
     when you're troubleshooting:
 
<h2>None of this should render because it's inside a comment.</h2>
 
-->

Special characters

Let you use special and non-US characters such as á, ö, or terms in Español.

<h1>This headline will never break at the non-breaking&nbsp;space</h1>
 
<p>Non-US characters such as &aacute;, &ouml;, or terms in Espa&ntilde;ol.</p>

Homework

...which is morphing into preparation for Lab #2

Finish formatting your copy of our 'rollerblade research paper':

Leave the table between <pre>...</pre> tags
Apply paragraph, headline, and list tags, as appropriate.
Use bold (somewhere other than a headline) to highlight one or more key phrases.

In our next class period we'll validate our markup, and put it in one of our layout templates.