| In
the often confusing world of the web and
new media we hear new acronyms tossed around
on what seems like a daily basis. This storm
of technologies, programming languages,
innovations and “standards”
can be confusing muddle to even the most
experienced among us and it can be easy
to try and just forget about it.
—By Jeremy C. Wright
This article series will be a type of encyclopedia
of new and upcoming technologies but will
also seek to give you enough knowledge to
decide which of these technologies you wish
to investigate further. We will provide
links to relevant information and we will
seek to empower you to not only feel comfortable
within the storm of new technologies, but
also to take the steps necessary to conquer
whichever technologies you choose.
The first pack of articles will focus on
Traditional Client-Side Web Technologies
such as HTML, CSS and JavaScript. If at
any time you feel I've missed something
or should include more technologies or categories,
feel free to let me know by writing me at
jwright@studiococo.com.
Each topic will cover a standard set of
information in a format much like this:
+ Sample
+ Definition
+ What It Really Is
+ Advantages
+ Disadvantages
+ Examples
+ Similar Technologies
+ Links
Without further ado or explanations, let’s
begin!
Definition [1]
A markup language used to structure text
and multimedia documents and to set up hypertext
links between documents, used extensively
on the World Wide Web. A set of tags and rules
(conforming to SGML) for using them in developing
hypertext documents. "Tags" are embedded in
the text. A tag consists of a "<", a "directive"
(case insensitive), zero or more parameters
and a ">". Matched pairs of directives,
like "<TITLE>" and "<TITLE>" are
used to delimit text which is to appear in
a special place or style.
Links
to other documents are in the form
Code Sample:
<A HREF="http://machine.edu/subdir/file.html">foo</A> |
Where "A" and "/A" delimit an "anchor", "HREF"
introduces a hypertext reference, which is
most often a Uniform Resource Locator (URL)
(the string in double quotes in the example
above). The link will be represented in the
browser by the text "foo" (typically shown
underlined and in a different colour).
|
A certain
place within an HTML document can
be marked with a named anchor, e.g.:
Code Sample:
<A NAME="baz"> |
The "fragment identifier", "baz", can be
used in an HREF by appending "#baz" to the
document name. Other common tags include
<P> for a new paragraph <B>
... </B> for text bold, <UL>
for an unnumbered list, <PRE> for
preformated text, <H1>, <H2>,
<H6> for headings.
HTML supports some standard SGML national
characters and other non-ASCII characters
through special escape sequences, e.g. "é"
for a lower case 'e' with an acute accent.
You can sometimes get away without the terminating
semicolon but it's bad style.
What It Really Is
HTML is the base language of the Internet.
For a web page to be displayed at all in
the browser HTML must be used as it is the
source of information, design, layout, etc.
Every other language whether it is server-side
like ASP and PHP or a complete development
suite such as .NET or J2EE requires HTML
as it's final output.
HTML is one of the simplest languages to
learn mainly because it isn't a programming
language, it functions on the simple principle
of:
Code Sample:
<TAG PROPERTY="Value"</TAG>
|
All of the rest of HTML is simply applications
of the above concept. You can layout tables,
include images, introduce hyperlinks, etc
with just a bit of HTML. When coupled with
the rest of the Traditional Client-Side
Technologies such as Cascading Style Sheets
(CSS) and JavaScript (JS) HTML can become
a powerful tool, when used in the right
hands. Everything from silly things like
floating clocks to very useful mechanisms
such as intuitive menu systems and clear,
concise forms are possible thanks to the
integration of the above three technologies.
Advantages
HTML is very good at what it was designed
for: The display and linking of different
kinds of information. HTML was created so
that any document created in HTML could
be viewed in any application which understood
HTML (a relatively simple task). Because
it was created on the Standard Generalized
Markup Language standard, HTML is very easy
to learn, I've taught it to college and
high-school students in a period of three
hours of class time, and taught it to hundreds
of friends and colleagues based upon the
simple principle of "tag, property=value"
as the rest can be picked up from a reference
manual.
Disadvantages
HTML has been abused since it's roots. It
is now used for hundreds of stylistic elements
which should never have been part of HTML.
Now HTML is more about "the web page" then
about the clear and concise distinction
between design, logic and content which
is why other technologies such as PHP &
ASP and XML were created.
Examples
If you wanted to see examples of HTML you
could go to any web page and simple View
Source (often contained in the menu when
you right click on the web page). Here are
some standard types of things you might
find:
| Line
Breaks & Paragraphs
Line Break:
<BR>
A paragraphs of text:
<P> Hello, this is my first
paragraph. </P> <P>Hello,
this is my second paragraph. </P> |
| Inserting
Links
Linking to another web page:
<A HREF="page2.html>Go
to Page 2</A>
Linking to another web site:
<A HREF=http://www.mysite.com>Go
to MySite.com</A>
Linking to an "anchor" on the current
page:
<A HREF="#author">View
Author</A>
Using all 3 together:
<A HREF=http://www.mysite.com/page2.html#author>View
Autho on Page 2 of MySite.com</A>
|
| Inserting
Images
Inserting an image:
<IMG SRC="myimage.jpg"
height="100" width="320"
border="0">
A small image, linking to it's
full-size counterpart:
<A HREF="bigimage.jpg"><IMG
SRC"smallimage.jpg" height="50"
width="50" border="0">
|
A
Simple Table
A table with 2 rows, and 2 cells in
each row:
<table
width="100%" border="0"
cellpadding"2" cellspacing="2">
<tr> <td> Cell1, Row 1 </td>
<td> Cell 2, Row 1 </td>
</tr> <tr> <td> Cell
1, Row 2 </td> <td> Cell
2, Row 2 </td> </tr> </table>
|
| Changing
the Font & Color of Some Text
Arial, red text, bold, 10pt (size
2 is 10pt):
<font face"arial" color="#FF0000"
size="2"><b> Some
bold, red text in Arial </b>
</font>
|
Similar Technologies
There are many technologies which are
very similar to HTML in terms of how they
look in code, mainly because there are many
technologies which are based upon the SGML
standard. Some of these include:
XML: XML allows you to structure data
and then share that data across any system
which can read XML. It ensures that the
data is completely separate from the design
of a page. SVG: Based upon XML, SVG is
a tag-oriented approach to describing
vector graphics. Though it is currently
very young, SVG does have much potential
for dynamic images through code.
| 
Hosted by