A Look at HTML
Download
Report
Transcript A Look at HTML
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.