Post on 20-Jan-2016
description
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.