a look at html (and xhtml)

A Look at HTML(and XHTML)

Types of Web Applications

Clipper

• In your home directory create the directory: public_html

• Index.html acts as your home page.

• To make the page accessible on the web do the following to the home directory: chmod o+x <home directory>

Birth of HTML

• 1960’s the seeds of what would become the Internet are formed.

• Roughly the same time some physicists at CERN released an authoring language and distribution system they developed for creating and sharing multimedia-enabled, integrated electronic documents over the new Internet.

• First modern browser is built at NCSA and is called Mosaic (Mozilla).

Standard Generalized Markup Language (SGML)

• Could be thought of as the godfather of all markup languages.

• Problem: It is so broad and all encompassing that mere morals can’t use it.

• HTML, somewhat a black sheep of the family is a simplified enough form of SGML to make it more usable.

World Wide Web Consortium(The Guardians of HTML)

• Formed with the charter to define the standards for HTML and later XHTML.

• Broader Responsibilities Include:– Cascading Style Sheets (CSS)– HTML– Extensible Markup Language (XML)– Document addressing on the web– Solicit draft standards for extensions to

existing web technologies.

HTML vs. XHTML

• HTML’s development was more or less a tug of war between the World Wide Web Consortium (W3C) and the browser developers (first Netscape, then IE).

• Eventually the W3C won out with the release of HTML 4.01, which is pretty much the last release of HTML.

HTML vs. XHTML

• HTML needed a way for the constant changes in how to distribute, process, and display documents.

• W3C developed the XML standard.• XML Provided a way to create new,

standards-based markup languages that don’t take an act of the W3C to implement.

• XHTML is HTML reformulated to adhere to the XML standard.

HTML vs. XHTML

• They are not word-processing tools, desktop-publishing solutions, or even programming languages.

• Fundamental purpose is to define the structure and appearance of documents and document families so that they may be delivered quickly and easily to a user over a network for rendering on a variety of display devices.

HTML vs. XHTML

• Provides a framework for display content in a web page.

• They are however limited in how much control you have over how the content will be displayed.

HTML vs. XHTML

• Deprecated features– Replace when able.

• Standards not supported– Cope the best you can.

• Supported features not part of the standard.– Avoid using at all costs.

The Basics

• HTML and XHTML function through the heavy use of tags.

• A tag is enclosed within a set of ‘< >’.

• Tags are paired together, with affected content placed between the pair.

• The end tag is noted by placing a ‘/’ before the name of the tag.– Example: <title> This is the Title Tag </title>

The Basics

• Every tag has a name.– XHTML case sensitive, HTML not.

• Some tags have an optional list of tag attributes.– Order unimportant.– Placing attributes in quotes optional

(sometimes) for HTML not for XHTML.

• Try and keep a tag all on one line.

Some Notable Tags

• <html>,</html> : Lets the browser know the web page is encoded in html.

• <head>,</head> : Where you put information about the document being displayed.

• <title>,</title> : What title you want to give your document.

• <body>,</body> : Where you put the actual document you want displayed.

Example Web Page

<html><head><title> My first HTML document </title></head><body>This is a web page.</body></html>

Ways to Create Web Pages

• Use and editor like Netscape Composer or have Microsoft Word save your document encoded in html.

• Put in all the tags yourself using a basic text editor or perhaps an editor designed to help match up tags.

Nesting Tags

• Last tag in should be first tag closed off.

• XHTML very much dislikes improper nesting of tags.

Tags Without Ends

• A few tags in HTML have no end:

<area> <base> <base front>

<br> <col> <frame>

<hr> <img> <input>

<isindex> <link> <meta>

<param>

• XHTML tags all have endings: <br />

Adding Comments

•  : Used to include comments in the web page.

Note: Anything that isn’t a tag or a comment is text.

Hyperlinking

• <id> </id> : Used to set a hyper location for a section of text.

• <a> </a> : Used to create a hyperlink to a web page or a section of text.

Hyperlink Example

<h3 id = “Stews”>Kumquat Stew Recipes</h3>

<a href= “http://www.kumquat.com/archive.html” >Kumquat Archive</a>

<a href= “http://www.kumquat.com/archive.html#Stews” >Kumquat Archive</a>

Few Text Formatting Tags

• <i> </i> : Italics

• <b> </b> : Bold

Splitting up the Text

• <br> </br> : Line break

• <div> </div> : Division

• <p> </p> : Paragraph

<div> and <p> define a region, and <p> adds more vertical space between two regions of text.

a look at html (and xhtml)

Documents