A Look at HTML and XHTML Types of

Clipper • In your home directory create the directory: public_html • Index. html acts

Birth of HTML • 1960’s the seeds of what would become the Internet are

Standard Generalized Markup Language (SGML) • Could be thought of as the godfather of

World Wide Web Consortium (The Guardians of HTML) • Formed with the charter to

HTML vs. XHTML • HTML’s development was more or less a tug of war

HTML vs. XHTML • HTML needed a way for the constant changes in how

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

HTML vs. XHTML • Provides a framework for display content in a web page.

HTML vs. XHTML • Deprecated features – Replace when able. • Standards not supported

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

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

Some Notable Tags • <html>, </html> : Lets the browser know the web page

Example Web Page <html> <head> <title> My first HTML document </title> </head> <body> This

Ways to Create Web Pages • Use and editor like Netscape Composer or have

Nesting Tags • Last tag in should be first tag closed off. • XHTML

Tags Without Ends • A few tags in HTML have no end: <area> <base

Adding Comments • <!--, --> : Used to include comments in the web page.

Hyperlinking • <id> </id> : Used to set a hyper location for a section

Hyperlink Example <h 3 id = “Stews”>Kumquat Stew Recipes</h 3> <a href= “http: //www.

Few Text Formatting Tags • <i> </i> : Italics • <b> </b> : Bold

Splitting up the Text • </br> : Line break • <div> </div> : Division

Slides: 23

Download presentation

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 (W 3 C) and the browser developers (first Netscape, then IE). • Eventually the W 3 C 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. • W 3 C developed the XML standard. • XML Provided a way to create new, standards-based markup languages that don’t take an act of the W 3 C 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 front> <col> <frame> <hr> <img> <input> <isindex> <link> <meta> <param> • XHTML tags all have endings:

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 <h 3 id = “Stews”>Kumquat Stew Recipes</h 3> <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> : 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.