CS257 Quick HTML Intro (this is an "h1" heading)

Your job here is to learn the meanings of all the HTML tags on this page, and to do some experimentation with them.

  1. In your browser, select Save (Ctrl-S or Command-S or whatever) and save a copy of example1.html on your computer.
  2. Open the saved copy in your browser (Ctrl-O, Command-O,...) and in a text editor.
  3. For questions that appear below, make sure you figure out the answers.
  4. Try editing stuff in your text editor, saving, and reloading in your browser to see the effects of your changes.
  5. Make a list of all the tags in this document, and ensure that you understand them all. Questions? Write them on the wall.
  6. Searching for "html tag p" or similar for other tags will quickly get you to documentation and tutorials.

Heading h2

This paragraph asks: where does the <title> tag's text appear in your browser?

This paragraph asks: what do the default inter-paragraph spacing and first line indentation look like in your browser?

And this one asks: how do newlines and indentations in the source code appear in the displayed version of the page?

Heading h3

Does this document have syntactically valid structure? Test it by visiting the W3C HTML validator

Heading h4

Are you using Chrome or Safari? Right-click on this page and select "Inspect" or "Inspect Element" to get a nice collection of developer tools. (Tools like this may be available on Firefox and IE and other browsers, but I only have Chrome and Safari installed on my computer so I can't easily check.) Feel free to play around with this to see what it shows you. We'll use these tools for debugging Javascript on Friday.

Heading h5

HTML entities allow you to display HTML special characters like <, >, and &.

They also allow you to represent any Unicode character with ASCII text, like this one: 😀. On the other hand, if your text editor is capable of saving arbitrary Unicode text and your HTML page has a suitable charset like UTF-8 (see the <meta> tag in the <head> section above), you can just paste the Unicode character into your source code directly, like this: 😀.

Heading h6

That's a tiny heading

Do you like lists? I like lists

  1. Here's
  2. an
  3. ordered
  4. list, defaulting to numbers
  1. Here's
  2. an
  3. ordered
  4. list with lowercase letters
  1. Here's
  2. an
  3. ordered
  4. list with uppercase Roman numerals

I also like tables

Antlers?Wings?Noisy?
CrowNoYesYes
MooseYesNoNo
MothNoYesNo

To make tables fancier, you'll need CSS. (We could add a "border" attribute to the table tag, but it's recommended that we use CSS instead.)

Here's a picture

Some more information

The World Wide Web Consortium (also known as W3C) is the standards organization that maintains the formal definition of HTML. The most up-to-date version of HTML is HTML5. The current version of CSS (also a standard of the W3C) is CSS3.

When you search for references for HTML and CSS details, the top results will often point you to w3schools.com. This organization has tons of documentation, and I find it quite useful. That said, there are many web developers who don't like w3schools very much. They often argue that the best source for reference and tutorial info for web development is the Mozilla Developer Network. For our purposes, I think either one will work fine for you, but I wanted to let you know that w3schools is not related to W3C, and that it's controversial to some degree.