HTML Syntax

HTML files are just text files, and they can be edited with any text editor. This is deceptively simple, because your results
will be unpredictable unless you actually have some idea of what you are doing. Armed with some knowledge, however, you can
effectively create and maintain Web sites with free software.

I cannot emphasize enough the importance of syntax and good typing. Even though HTML tags appear in plain text, they use a very specific syntax to accomplish their functions. 90% of the errors that beginners make are either from typos or misapplication of the rules of HTML syntax. These are both alien concepts to non-programmers: (1) that you must type accurately at all times, and (2) that all of the picky details of syntax must be correct, especially including commas, semicolons, colons, and quotes. Browsers will ignore anything they don’t understand and keep going when they try to display a page (here is a ridiculous one-liner). A typing or syntax error could negate an entire section of your page, which rarely turns out well. Validate your HTML and CSS!

All tags must be closed, and in the right order. Most tags are closed by repeating the tag with a slash in front of it, as in: <strong>    and </strong>.

Paired tags always appear like this: <table> will eventually be followed by </table>, although you may find many other tags between the starting tag and the ending tag for any given pair. Tags that appear within the scope of another tag have a parent-child relationship that can be exploited in CSS. Not only can you apply styling to a DIV (box) and to a paragraph, you can also apply styling to paragraphs that occur inside DIVs – this is a very powerful technique.

These HTML tags do not require a separate ending tag: br, img, input, link,
doctype, and meta. Instead, these tags are self-closing: they include the slash just inside the closing angle bracket of the HTML tag, as in
    <img src="whatever.jpg" title="An Example." />

Tags are hierarchically nested. You can easily chart out a page to discover problems with nesting – draw arcs on the
printed page to connect pairs of tags. If your arcs overlap, then you have a problem. This is correct:

<strong><em>Example</em></strong>

whereas this is not correctly nested:

<strong><em>Example</strong></em>

 

An HTML tag can be applied in several ways:

• As the beginning and ending tags completely wrap around something, the tag’s effects are directly applied to the enclosed elements. Make some words <strong>boldface using the STRONG tag</strong> in this sentence.
• The opening tag may also include attributes that apply CSS styling to the enclosed content. The tag itself may have effects, but most of the CSS will come from these attributes:
  • style: directly apply the embedded CSS to the enclosed elements.
  • class: associate one or more CSS class names with the outermost element, allowing you to apply CSS to all elements with that class name.
  • id: associate a unique ID with a single element on the page, allowing you to add CSS specifically for the element.

Certain other tags have additional attributes:

• alt: supply alternate text for a screen reader
• title: browsers use this text for a tooltip when you hover over the element
• name: the name of a link anchor point within a page, allowing you to jump directly to the spot
• href: the URL or filename target for a link
• src: the URL or filename to be linked in
• onmousedown, onhover, etc: link anchor attributes for mouse events

Common HTML Tags

Top-Level Tags		Head Elements
doctype : defines the language and HTML dialect		meta : additional info about the page, site, including description and keywords.
html : surrounds the HTML for a page		title : appears in the browser titlebar
head : surrounds the header info section		link : loads a style sheet in an HTML page
body : the actual page content. You can also apply properties to the entire page, and execute Javascript when the page is loaded.		style : embedded style declarations script : embedded Javascript
Block Elements: always begin on new line; width, height, line-height, margins can be set; default width is 100% of containing element		Inline Elements: always begin on same line; can’t change heights or margins; width is only as long as the element, and can’t be changed
div : creates a box (container) that can be sized, styled, and positioned.		a : creates a hypertext link, and is also used to define a location within a page for linking
h1,h2,h3,h4,h5,h6 : headers of varying sizes (h1 is largest and most important)		br : forces the next HTML element to start on a new line
p : defines a paragraph of text		img : inserts an image into the page
table {tr, td} : creates a table (like this one)		span: used to apply formatting to a limited span of text or other elements
form {input, select, textarea} : creates a form for accepting user input		strong, em : makes text boldfaced or italic; avoid use of obsolete <b> and <i> tags.
blockquote, pre : different kinds of nonformatted inclusions		iframe (obsolete): an inline frame that displays an entirely different HTML page; use object to embed other types of objects (Flash, Java, etc)
Lists: block elements that provide support for lists of things		Attributes: both inline properties and mechanisms for applying CSS styling
ul {li} : an unordered list		style : for applying inline CSS directly to an HTML element
ol {li} : an ordered list		class : for assigning a CSS class to an element
dl {dt, dd} : creates a definition list		id : uniquely identifies an element for CSS or DOM manipulation

Remember: Every HTML tag has default values that are assigned by the browser: sizes, heights, margins,padding, and more. These defaults vary from browser to browser. If you want to be sure how your HTML pages will look, then specify everything that affects your layout using CSS styling. You can also use a CSS Reset to reset all these defaults to zero or neutral values.

Canonical Web Page (and CSS and Javascript)

I have prepared three files for student use, to provide a starting point for creating Web pages.

• Prototype HTML Page: this page has a lot of stuff that provides a solid foundation for your files. You can prune away irrelevant parts as you wish, but remember that things were initially placed in that file for a reason. Here is a short version that leaves out some less-necessary things, along with all the example stuff in the BODY.
• Prototype CSS file: this file has a so-called "CSS reset" at the start, which resets all values to known values. Different browsers provide different default values for all these settings, so resetting them to clear those defaults is a good approach. You simply add back the styling that is needed, and you don’t have to worry as much about cross-browser appearance.
• Prototype Javascript file

To use these files, simply download them to your computer, and save them in a place where you can find them. These three files consist of a simple HTML file that includes CSS and Javascript files. After you copy them, simply delete the unwanted material in the BODY tag, and morph the page into whatever you want it to be.

Examples of the Most Common HTML Tags

Common HEAD Elements

• head:  <head> and </head>
• meta tags:
  • description:  <meta name="description" content="This is the student Web site for CIS86.">
  • keywords:  <meta name="keywords" content="CIS86, College of the Redwoods,Web Site Design">
  • charset:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • author:  <meta name="author" content="Site by Monolith Design, www.MonolithDesign.com" />
• title:  <title>CIS86 2009 HTML Examples</title>
• link:  <link href="CSS/CIS86.css" rel="stylesheet" type="text/css"> and
  <link href="CSS/CIS86-Print.css" rel="stylesheet" type="text/css" media="print"> and
  <link rel="shortcut icon" href="../Monolith.ico" >
• style:
  <style type="text/css">
  .explain {color: #990099}
  </style>
• script:
  <script type="text/JavaScript" language="javascript" src="CSS/CIS86.js"></script>
  and

  <script type="text/JavaScript">
  function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments;
  document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
  if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  }
  </script>

Common BODY Elements

<div id="One" style="background-color: #990099;">
<p>This is DIV One. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait facilisi.</p>
<p>Here is the third sentence and paragraph.</p>
</div>

---

BLOCK ELEMENTS

<h1>This is Header 1.</h1>

<h2>This is Header 2.</h2>

<h3>This is Header 3.</h3>

<h4>This is Header 4.</h4>

<h5>This is Header 5.</h5>

<h6>This is Header 6.</h6>

<hr>

---

<p>This defines a paragraph of text. It can be as
long as you want. It can include images, lists, etc.</p>

---

<table border="4" cellpadding="4" cellspacing="4" bgcolor="#99FFFF">
<caption>This is the table caption.</caption>
<tr>
<td>This is column 1 of row 1.</td>
<td>This is column 2 of row 1.</td>
</tr>
</table>

This is the table caption.

This is column 1 of row 1.

This is column 2 of row 1.

---

Lists are commonly used in HTML. Here is a great article about modern trends in styling and using lists.

<ul>
<li>List Item 1
    <ul>
    <li>Nested Item 1</li>    <li>Nested Item 2</li>
	</ul></li>
<li>List Item 2</li>
</ul>

---

• List Item 1
  • Nested Item 1
  • Nested Item 2
• List Item 2

---

<dl>
<dt>Phrenology</dt>
<dd>Mapping bumps on the head to personality characteristics.</dd>
<dt>Politics</dt>
<dd>A strife of interests masquerading as a contest of principles.
The conduct of public affairs for private advantage.</dd>
</dl>

Phrenology

Mapping bumps on the head to personality characteristics.

Politics

A strife of interests masquerading as a contest of principles.
The conduct of public affairs for private advantage.

---

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

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

<hr />

---

<div style="width:250px;background-color:#ddeeff">
This is a BOX.
</div>

<a href="CIS86-Books.html" title="Book Reviews">CIS86 Book Reviews</a>

CIS86 Book Reviews

---

<img src="images/Star.gif" alt="Little Star" width="15" height="14" />

<p>Note that images are inline elements, <img src="images/Star.gif" alt="Little Star" width="15" height="14" /> so they do not start on a new line.</p>

Note that images are inline elements, so they do not start on a new line.

---

<p>I am <span style="font-weight:bold">going to turn some of it bold</span>
using the SPAN tag and CSS styling.</p>

I am going to turn some of it bold using the SPAN tag and CSS styling.

<p>I am <strong>going to turn some of it bold</strong> using the STRONG tag.</p>
I am going to turn some of it bold using the STRONG tag.

---

.CIS86Advisory {font-style: italic; color:#336699; }

<div class="CIS86Advisory">This is controlled by the definition in the CSS file.</div>