Introduction to HTML (HyperText Markup Language)

HTML

HyperText Markup Language (HTML)
The language in which Web pages are written. HTML is made up of tags, which are used to provide information about content (whether it is a heading, a paragraph, part of a list, etc). Tags are also used to include media (such as images, video or sound), accept user input (forms), or link to other documents (hyperlinks) within or outside of the web site.

HTML

HTML is a Markup Language. Its purpose is to Mark up or describe the content which it contains. It provides information about what type of information is being transmitted. As such, tags that do not describe the content, but instead the presentation (such as font, big, etc.) should not be used and instead a separate CSS file should be used. Why? Easier maintenance. When structure is separate from presentation and behavior, it is easier to change one because it is not tied with the others. Also, if a user does not have javascript or css capabilities, the content is still accessible. Increases portability of information (a la video).

The Three Layers of a web page

  1. Structure (XHTML/HTML)
  2. Presentation (CSS)
  3. Behavior (JavaScript)

About HTML

  • Ignores white space other than 1 space (tabs, line breaks, carriage returns, etc. will not display when rendered in a browser, but should still be used to help make your code more readable and easier to maintain).
  • Accepts tags and attributes regardless of case (<p> is the same as <P>) and the presence of quotation marks (<p ALIGN=center> is the same as <p align="center">)

HTML Terms | Tags

Tags
The building blocks of HTML. Tags are composed of HTML Codes (e.g. p is the HTML code for paragraph) enclosed in angle brackets (< and >). There are 2 types of tags, container/two-sided tags and empty/one-sided tags. Container/two-sided tags have a beginning and an ending tag (<p></p>). Empty/one-sided tags do not (<br />)

HTML Terms | Attributes

Attributes
Empty tags (e.g. <br />) or the beginning tag in a set of container tags (e.g. <p>) can include attributes, which contain information about the tag of which they are a part. For example, the one-sided <img> tag might contain an alt attribute with a value of the alternate text for the image (<img alt="Photograph of a Hot Dog">). The VALUE is the text following the equal sign after the attribute. Values should always be enclosed in double quotation marks.

About XHTML (eXtensible HTML)

  • Reformulation of HTML based on XML (eXtensible Markup Language) rules.

HTML Document | Document Type

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The !DOCTYPE tag is a Public Text Identifier appearing at the very beginning of a document, declaring that the document conforms to a particular DTD (Document Type Definition). This is important because it can effect the way your page renders in some browsers.

HTML Document | Validation

The doctype establishes the version of HTML that your document is written in. This means that it establishes what elements are OK to use and what elements are not, among other things. Using the W3C Validator, you can "validate" whether or not your HTML code conforms to the specifications of your doctype. Your HTML style guide should be Valid XHTML 1.0 Strict.

HTML Document | HTML Tag

<html>...</html>

Top level tag (containers entire document) and indicates that the document is written in HTML.

HTML Document | HEAD Tag

<head>...</head>

The head section of the document contains information that is related to the document, but that is not actually viewable content (apart from the title). It is also where you attach external files (javascript, css, etc.)

HTML Document | TITLE Tag

<title>Page Title Goes Here</title>

This is a required tag for all HTML documents, and always goes inside of the head tags. It identifies/summarizes the content of the document. It appears in the top of the browser application and is important for bookmarking purposes (it is what users see when they bookmark your site) as well as for search engine indexing (it is what users see when your site comes up in a search, also it is given heavier consideration by search engines in terms of determining the content of your web site).

HTML Document | BODY Tag

<body>...</body>

This tag contains all of the content for a document (images, text, etc.)

HTML Elements | Headings

<hX>Heading Text</hX>

There are six heading tags (<h1> </h1> through <h6></h6>). They indicate section headings and are rendered at different sizes by browsers (<h1> being the largest and <h6> being the smallest)

HTML Elements | Paragraphs

<p>Paragraph text.</p>

Indicates a paragraph of text. Since browsers ignore white space (including line breaks), the paragraph tag breaks up the document so that it is not one large block of text. This text is in a paragraph tag.

This text is in a separate paragraph tag.

HTML Elements | Lists

There are three types of lists in HTML that can be used to logically structure text.

  • Ordered Lists (<ol>..</ol>)
  • Unordered Lists (<ul>..</ul>)
  • Definition Lists (<dl>..</dl>)

HTML Elements | Ordered Lists

Ordered lists are marked up with the <ol> tag. Each list item is marked up using the <li></li> tag. For example, the following code...

	<ol>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ol>

HTML Elements | Ordered Lists

Renders as you see below (numerical list)

  1. Item 1
  2. Item 2
  3. Item 3

HTML Elements | OL Attributes

start
numerical value of what item the list should start on
<ol start="2"> will begin with the number 2, then 3 etc.
type
type of ordered list (a, b, c or i,ii,ii, etc.)
<ol type="a"> will be a, b, c <ol type="i"> will be i, ii, iii

HTML Elements | Unordered Lists

Unordered lists are marked up with the <ul> tag. Each list item is marked up using the <li></li> tag. For example, the following code...


<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

HTML Elements | Unordered Lists

Renders as you see below (bulleted list)

  • Item 1
  • Item 2
  • Item 3

HTML Elements | UL Attributes

type
type of bullet to use for unordered list
disc, circle, square, etc.
<ul type="square"> will use square blocks for bullets

HTML Elements | Definition Lists

Definition lists are for presenting a list of terms and their corresponding definitions. They are marked up with the <dl> tag. Each term is contained in the <dt></dt> tag, followed by the corresponding definition(s) in the <dd></dd> tag(s) as follows...

<dl>		
	<dt>fly</dt>
	<dd>to move through the air using wings.</dd>
	<dd>to be carried through the air by the 
	wind or any other force or agencys.</dd>
</dl>

HTML Elements | Definition Lists

Renders as you see below

fly
to move through the air using wings.
to be carried through the air by the wind or any other force or agencys.

HTML Elements | Phrase Elements (logical)

Logical Phrase Elements give some information about the text that they contain.

  • <em>…</em> example
  • <strong>…</strong> example
  • <cite>…</cite> example
  • <dfn>…<dfn> example

HTML Elements | Phrase Elements (logical)

  • <code>…</code> example
  • <samp>…</samp> example
  • <kbd>…</kbd> example
  • <var>…</var> example
  • <abbr>…</abbr> example
  • <acronym>…</acronym> example

HTML Elements | Phrase Elements (physical)

Physical Phrase Elements are used simply to style the text they contain. Should generally be replaced with CSS styling.

  • <b>…</b> example
  • <i>…</i> example
  • <tt>…</tt> example

HTML Elements | Phrase Elements (physical)

  • <big>…</big> example
  • <small>…</small> example
  • <sub>…</sub> example
  • <sup>…</sup> example

HTML Elements | Special Characters

You can insert special characters (e.g. ©,®,™,Æ) using Character Codes that appear in the form of &CODE; and &#CODE;

For example, the character code for © is &copy;

The character code for ™ is &#8482;

HTML Elements | Horizontal Rules

Created with the <hr /> tag

Attributes include align (center, left, or right), width (width of the line in pixels, % or ems) and size (thickness of the rule in pixels, % or ems).

noshade is also an attribute of the <hr /> tag that requires no value (<hr noshade />) that presents the rule without the beveled, 3d effect.

HTML Elements | Line Breaks

Created with the <br /> tag

Because browsers ignore white space (other than a single space), if you want to force a line break you have to code it into your html.

Example: "Line<br />Break" will render as...

Line
Break

Differences between XHTML and HTML

  • Tags must be all lower case (<p> not <P>)

Differences between XHTML and HTML

  • Attributes must be all lower case (align not ALIGN)

Differences between XHTML and HTML

  • Values must be enclosed in double quotation marks (<p align="center"> not <P ALIGN=CENTER>)

Differences between XHTML and HTML

  • All tags must be terminated (ended) with a closing tag (for each <p> there must be a </p>), tags without a corresponding closing tag must include a forward slash before the great than symbol (<br /> not <br>)

Differences between XHTML and HTML

  • Tags must be nested properly (closed in the order they are opened) (<p><strong>hello</strong></p> not <p><strong>hello</p></strong>)

Basic Graphics | The IMG Tag

<img src="folder/filename.jpg" alt="Alternate description of the image" />

The value of the src attribute contains the location of the image being displayed.

The value of the alt attribute contains an alternate description of the image being displayed and is required in XHTML

IMG Tag Attributes

alt
Alternate text (disabled/search engine/accessibility)
border
Specifies the border width of an image*
align
left/center/right*
vspace/hspace
Padding above/below or left/right of image*
height/width
Specifies height and width of the image

* use CSS