Copy the file “Carnival.txt” in the Resources folder to “Carnival.html” and put it in the Workshop folder along with all of the images (we’ll get to those later). Open Carnival.html in a text editor, such as Smultron on Mac OS X. It’s a reasonably formatted text file, but it certainly isn’t what you’d expect to view on the web nowadays.
Go ahead and view it in your browser. It should look like a mass of text, with no text standing out from any other text.
Over the course of this tutorial we’re going to make parts of the text stand out: headlines, paragraphs, links, emphasis, and lists. We’ll do this by telling the browser what each of these bits of text mean, structurally.
- HTML and BODY
- Almost everything in HTML is a tag describing the meaning of text. Even the web page itself needs to be surrounded with a tag saying that this is a web page. That tag is the HTML tag. At the very top of the document, type “<html>”. At the very bottom of the document, type “</html>”.
- Paragraphs and Headlines
- If you go and view the page in your browser, it’s still just a mass of text. We’ve told the browser where the document is, but we still haven’t given it any structure. Let’s set up one headline, one paragraph, and one quote. These are the first three lines of the review.
- The HEAD of the document
- Human eyeballs aren’t the only things reading your web page. Computers also visit your web page. In fact, computers are the only things that ever visit your web page: computers visit your web page and then store your web page in a database or display your web page to a human visitor.
- Paragraphs and Blocks
- When you’re marking up entire sections of your document, you basically have two kinds of tags: paragraph-level tags, and block-level tags. The main difference is that paragraph-level tags cannot contain block- or paragraph-level tags, but block-level tags can. You can’t put a paragraph inside a headline, or a headline inside a paragraph. But you can put both headlines and paragraphs inside of blockquotes. Often, you have to: while…
- Character styles
- So far, every tag we’ve looked at has contained no text, or it has contained entire paragraphs (or, in the case of blockquote, potentially has contained multiple paragraphs).
- The basic web page: Validation
- I’ve talked a little about the difference between XHTML and HTML. But how does the browser know the difference? You need to tell it.
