HTML Basics

The basic structure of the HTML document consists of:

1. a doctype: specifies the document type definition and flavor (strict or transitional).
2. a root - the html tag set that encloses the rest of the document
3. a head - text that is displayed in the browser's title bar, plus linked elements like css files.
4. a body - the page content

To see sample template click here.

HTML tags can:

• have start and end tags: <li>Like a list item </li>
• be self enclosing: <img src="image.jpg" alt="image missing" />

The head section contains:

• the title
• linked files such as style sheets and metadata

The body contains content consisting of text elements such as:

• heading:

  Headings are block elelments with different default sizes. CSS rules can be specified if the heading includes an id attribute.
  <h3>Headings are coded like this</h3>.

• paragraph:

  Paragraphs are block elements at 100% base text size, a blank line follows.
  <p>Coded like this</p>.

• div:

  A div is an element used to group and organize code. The id has a formatting rule in a css file and must be unique within a document.
  <div id="main">Text to be formatted goes here.</div>

• span:

  A span is an element used to apply formatting inside a block element.
  <span id="spanformat">Text to be formatted goes here.</div>

• a:

  Anchors are used to create link to another page. If the URL of the page is a full path, we call it an absolute URL.
  <a href="http://www.google.com">Text to label the link goes here.</a>

• image:

  JPEG, GIF, and PNG images are supported by most browsers. Images are coded similar to anchors, but require an alt text string in case image cannot be loaded. This example references an image with a relative path.
  <img href="flower.jpg" alt="image not found"/>

• lists:

  An unordered (bullet) list is created with start and end ul tags, an ordered (numbered or lettered) list is created with start and end ol tags. Both types of lists have list items inclosed in li tags.

Escaping Special Characters:

Certain special characters such as <, >, &, and the non-breaking space need to be coded with an escape sequence. These are written as &lt, &gt, &amp, and &nbsp.

Inline formatting and emphasis:

Text can be italicized by enclosing em tags or emboldened by using strong tags. Code tags display text in a fixed-specing font such as Courier, although special charactes still need to be escaped.

© Copyright 2014 Kelly Debure, Eckerd College.