include "_i/1.h" ?>
Text and list tags
include "_i/2.h" ?>
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
- <b>bold</b> - bold
- <i>italic</i> - italic
- <tt>typewriter text</tt> -
typewriter text
- <del>struck-through text</del> -
struckthrough text
Combine more than one effect, but nest tags appropriately....
- <b><i>bold and italic</i></b> - bold and italic
Tags that force a line break
Paragraph <p>
<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 <br />
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 space</h1>
<p>Non-US characters such as á, ö, or terms in Españ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.
include "_i/3.h" ?>