Week One Class Notes

Class Notes: week 1

In the book chapter two.

First lets check out this web thing

Can we do something like this??

What is HTML? What is XHTML?

HTML is used to create electronic documents that can be read on many different systems using software called a browser.
The browser translates the html codes into a presentation on the screen.
HTML is NOT a true programming language
HTML is not a WYSIWYG processor or publisher.
-carriage returns creates only "white space" and that browsers usually compress this white space into a SINGLE space.
HTML or Hyper Text Markup Language
XHTML is a simple, more standardized version of HTML.
XHTML standard is based the rules and philosophy of XML and NOT html 4.x
EXtensible HyperText Markup Language

Do you need help or are you just browsing?

Browsers

(IE vs Firefox on a PC ) vs (Firefox vs IE vs Safari on a Mac)

Lets get started!!

Tag you're it!

-Throughout the semester with almost every new concept I introduce I will be introducing a new set of tags and attributes to go with it.

A tag (or element) is an html code that is enclosed in angel brackets <>. They are used to lay out the web page. The <br/> (empty tag) for example will add a line break.

Most tags however are of the container type. These tags have both a starting tag and an end tag. For example, if I wanted to bold a word I would surround that word with the starting and ending <b> </b> tag. Notice that the end tag is the same as the starting tag but with a "/" placed in front.

<b> HI WORLD </b> would produce HI WORLD as output on the screen.

An attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name.

<p align="center"> jkfahljkghadfjhgaouhoaruehgihraeg </p> would display this horrible paragraph to the center of the browser window.

To be compliant with the new html standard (xhtml), all tags and attributes must be in lower case. In addition, all values of attributes need to surrounded by quotes. Here is the basic syntax for xhtml tags and attributes

<tag attribute="value"> </tag>

ALL tags need to be closed!

examples <h1> Hello World </h1> <br/>

OK Now how do I make one of these web pages??

First you need to pick an application to produce your web page.

Please, make a "note" of this.....

HTML(text) editor vs. Web editor

Text editor is a plain application that allows you to create, save and modify text. It has some editing features but may not have the full functionality of most word processors. It also doesn't bring some of the problems that comes with a word processor when creating an html page.
The text editor that we will use it NOTEPAD, yes that NOTEPAD.
Please do not mistakenly open WORDPAD and confuse this application with NOTEPAD. WordPad is a word processor and will cause problems when creating and html page.
a WEB editor is a WYSIWYG type of application that we will use later in the semester.

Basic HTML template.

<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>

HTML - Alerts the browser of the presence an html file
HEAD - provides description about the document
TITLE - Always located in the HEAD. Provides a description about the document for display above the window.
BODY - Identifies the contents of the Web page.

Creating an XHTML Source Document.

How do we go from html to xhtml?

Since XHTML is based on XML and NOT HTML, it inherits the syntax rules of XML.
One of the primary syntax rules concerning us the case sensitivity. HTML is NOT case sensitive, however, XHTML is. ALL XHTML TAGS NEED TO BE IN LOWER CASE.

Basic XHTML Template.

Two steps to go from HTML to XHTML

Add the following two cryptic lines BEFORE the <html> tag
- <?xml version="1.0"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd">
Add the following attribute to the <html> tag
- <html xmlns="http://www.w3.org/1999/xhtml">

Other XHTML syntax issues:

All attributes need to be in lower case. Values that these attributes hold will be placed AFTER an "=" sign and contained in quotes.

This leaves us with: (page 29-32 in book)

<?xml version="1.0"?>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> </title>

</head>

<body>

</body>

</html>

To the tags!

<meta/> The meta tag is used to specify Keywords that describe a documents contents as well as a short description.

Two necessary attributes. "name" & "content"

<p></p> The paragraph tag. Used so separate text within a web page. Container type. Will provide line breaks.

Key attribute : align.

<br/> used for line break

Headings

<h1> Header one </h1>
<h2> Header two </h2>
<h3> Header three </h3>
<h4> Header four </h4>
<h5> Header five </h5>
<h6> Header six </h6>

<em> italics </em>

<strong> bold </strong>

<font> </font> (not supported in XHTML Strict)

Key attributes: size, face, color.