| CPSC 343 | Database Theory and Practice | Fall 2024 |
This document is intended to be an extremely brief introduction to HTML. Many details are omitted or simplified (e.g. not all syntax variations are presented). For more information, check out the HTML Tutorial from W3Schools.
See the HTML/PHP Local Quick Start for details on what to name your HTML files and how to view them.
HTML stands for the Hypertext Markup Language. It is structured as a series of tags (markup) which you add to a text document to provide information about the structure and meaning of the text. Originally HTML was intended only to indicate structure and semantic meaning (marking paragraphs, headings, table elements, etc) with the specific formatting (such as font, font size, bold/italics/underline, positioning on the page, etc) left up the thing displaying the document, though formatting tags have crept into HTML.
The "hypertext" part refers to HTML's ability to specify links between documents.
HTML tags are enclosed with <> symbols. Many tags have an open <tag> and a corresponding </tag>, indicating that the effect of the tag is applied to the text contained between the open and close tags. Some tags also have attributes which are listed between the tag name and the > in the open tag.
Tags should be properly nested, so <tag1> <tag2> </tag2> </tag1> is allowed but <tag1> <tag2> </tag1> </tag2> is not. Browsers differ wildly with what they'll let you get away with and how they interpret mistakes. You can use a validator like the one at http://validator.w3.org/ to check that your document adheres to the standards.
Every HTML document has the following basic structure:
<html> <head> <title>The Page Title</title> </head> <body> ...page content goes here... </body> </html>
The material in the <head> section does not actually appear on the page, but rather specifies information about the page. Of particular interest is the <title> tag, which specifies the page's title. This is what appears in the title bar of your browser window, on a tab in your browser window, or in the history list. It does not appear on the page itself (though often the information in the title is repeated elsewhere in the HTML document so that it does appear).
The material in the <body> section is what actually governs the appearance of the page.
No particular indentation or line-break convention is required, but indenting nested tags and using sensible line breaks can greatly improve readability.
HTML files are traditionally named with a .html extension (.htm on some Windows servers).
Also, many webservers are configured to automatically load a file with the name index.html when the URL specifies a directory name. It is a good idea to name your main page in each directory index.html (or index.php, if it contains PHP code).
If you aren't familiar with basic HTML tags like <p>, <h1> (and its relatives), <hr>, <ul> and <li>, and tables then you should check out at least one of the following links:
HTML comments are indicated by <!-- ... --> — these are multiline comments, and everything between the start and end tags is a comment.
Cascading style sheets (CSS) are the "proper" way to do appearance formatting (i.e. fonts, font styles, spacing, etc). They are a separate mechanism from HTML, though strongly tied to HTML, and (among other things) provide a very easy way to maintain a uniform appearance across a website. You are encouraged, though not required, to use style sheets for your final project. If you want to learn more, check out the nice example-driven tutorial from W3 Schools or the information from the Web Design Group (particularly useful for the list of CSS properties if you are already familiar with the basics of style sheets).