| HTML
|
 What is HTML?
-- The Hyper-Text Markup Language is the basic language of the
Internet. HTML is an SGML (Standard Generalized Markup Language)
application that conforms to International Standard 8879. HTML
uses tags such as <h1> and </h1>
to format text into headings, paragraphs, lists, colors, style,
hypertext links, etc. HTML is a non-proprietary system of tags
that can be created and processed by a wide range of tools.
The primary HTML file extensions are .htm and
.html. |
| |
|
HTML Source Code
-- You can view the HTML source code for most Web pages on
the Internet or other network by clicking View --> Source
(or Page Source).
|
|
To view the HTML source code for the Site Map, click the button. |
| [I placed a period "." inside the opening brackets in order to display the HTML tags.
If the periods were not there, the page would display as it does on the first page of this Web site.]
|
|
| |
|
HTML
from Scratch -- Creating
HTML pages "by hand" or "from scratch" involves typing in
each of the formatting tags, one by one. Many Web page developers
consider this the "old fashioned way," but some of us still
create our pages "by hand." Why would someone want to
use that slower method instead of the quicker drag-and-drop
or document conversion method? Because coding "by hand" or
"from scratch' offers the user flexibility, power and
confidence.
Flexibility -- The flexibility
to always be able to do what you want to do without having
to wrestle with the preferences of an HTML editor.
Power -- The power to add, change
and manipulate the script in ways the editor would never be
able to do.
Confidence -- The confidence that
comes with knowing that not only can you out-manuever any
HTML editor, but if something goes wrong, you have enough
of an understanding to be able to fix the glitch and be on
your way while other Web page creators are struggling with
their editor and the superfluous tags it imposes on their
pages.
|
| |
|
|
| |
|
|
| |
| HTML
Editors |
Choosing an HTML Editor
-- Used to help with create documents for posting online, HTML
Editors range from simple plain text applications to sophisticated
WYSIWYG Web page authoring tools, from the most elementary (and
free) to the sublime (and expensive). HTML Editor applications
can make creating Web pages easier, depending upon how easy
the editor is to work with and how much "extra" coding
it adds to your pages.
Text Editors -- On the inexpensive
end of the spectrum, users with a solid knowledge of HTML can
create every page on a Web site with a simple text editor like
Notepad (Windows) or SimpleText (Macintosh). Since these plain
text editors are included with their operating systems,
they are free. To use these and other text editors, the user
types in the text and the HTML tags, then saves the text file
with an .html extension instead of a .txt extension.
WYSIWIG Editors -- On the other
end of the spectrum lie the WYSIWYG Web page programs. WYSIWYG
stands for "What you See is What you Get." With these
programs, users can just drag-and-drop the text blocks and graphics
they want included on the Web page onto a blank or grid tableau.
The program takes over from there, generating all of the requisite
HTML tags. The amount of extra code (HTML tags) generated by
some of these programs boggles the mind; it's a wonder they
ever load. Be wary of extra code because it can make a Web
page difficult and time-consuming to load, edit or fix.
Personal Preferences
-- We all like to use what we have become accustomed to. I use
two HTML Editors: Dreamweaver and CoffeeCup HTML
Editor. I use one and then the other because there are things
I like about both applications. CoffeeCup has some nice features
while Dreamweaver is a very capable application that has emerged
as an industry standard. Because of the widespread use of Dreamweaver,
Instructional Designers and online Course Developers need to
know this application, whether or not they use it regularly. Neither
of these applications has added any extra code to my pages.
|
| |
| The Bottom Line --
A working knowledge of HTML is required
for developing Web pages, even if the developer uses one of
the WYSIWYG drag-and-drop programs. Fixing, tweaking and cleaning
up Web pages involves finding the problem or error in the code view and then changing
the HTML tags. For this task, developers need to know how to read
and write HTML. Instructional Design, Course
Development and Writing for the Web positions require a good
working knowledge of HTML, regardless of the actual HTML editing application
the company uses. |
| |
|
|
| |
|
|
| |
| JavaScript
|
 Brief
Description -- JavaScript is
a compact, object-based script language that allows increased
interactivity with the user. JavaScript events can recognize and respond to user events
such as mouse clicks and movements, form input, and page navigation.
JavaScript can be used to play an
audio file, execute an applet, or open a page in a new window. JavaScript
tags are embedded in HTML. JavaScript is not
compatible with old browsers, but recent Internet browsers have no problem running JavaScript events. |
| |
|
|
| JavaScript Events
-- Developers use JavaScript "objects" to create various "events"
on their Web pages. An "event" includes how the functions are triggered
to run. The easiest example is a button, whose definition includes
the words onClick="run_my_function()". The onClick event
runs the function when the user clicks a button. Common events include OnMouseOver,
OnLoad, and OnUnload. |
| |
JavaScript tags
are entered on the HTML page, but they are separated from the
regular HTML tags with beginning and ending SCRIPT tags. The
opening SCRIPT tag includes the name of the language <SCRIPT language="JavaScript"> and the event
description ends with a closing tag </SCRIPT>.
However, JavaScript
functions can be placed in the BODY of the Web page but are often placed inside the HEAD tags so that they
load as the page opens. This can help to reduce JavaScript
errors. On these pages, I have placed JavaScript tags in both places. |
| |
JavaScript
Examples --
(1) OnMouseOver: As you pass your mouse over the menu items above, the olive green bullets turn into orange arrows.
This change is caused by a JavaScript OnMouseOver event. These are the most common events.
|
| (2) The Click buttons throughout this site are JavaScript events, including setting the size of the window that opens.
|
(2) Rainbow Text: Watch the text below change color.
|
| |
| |
| Note: JavaScript developers
are generous with scripts. The sites listed
below offer JavaScript lessons and/or tutorials,
along with free JavaScript code (snippets) that developers
can use on their own sites. |
|
|
| |
| DHTML |
| DHTML -- DHTML stands for Dynamic HTML. DHTML is a method of creating interactive websites by using a
combination of markup language (like HTML), a client-side scripting language (like JavaScript), a presentation definition language
(such as Cascading Style Sheets [CSS]), and the Document Object Model. DHTML is not a technology in itself, but a term that refers to the use of a group of technologies together. |
| |
| Disadvantages -- Some disadvantages of DHTML are that it is difficult to develop and debug,
and DHTML has varying degrees of support among the different Web browsers. In the beginning, DHTML was only supported by Internet Explorer. DHTML is not as commonly used as JavaScript. |
| |
|
DHTML Example -- To play with an interactive clock, created as a DHTML
event, click the button. When you see the clock, move your mouse around the page and watch the clock magically
follow your cursor while ticking away the seconds.
|
| |
|
|
| |
|
|
| |
| Cascading
Stylesheets |
|
Definition
-- A Web page stylesheet contains style
rules that tell the browser how to present the page. A Cascading
Style Sheet (CSS) is a simple mechanism for adding style (e.g.
fonts, colors, spacing, alignment) to Web pages. CSS is a flexible,
cross-platform, standards-based language used to suggest stylistic
features applied throughout entire Web sites. In their most
elegant forms, CSS are specified in a separate file and called
from within the HTML page when it loads into a CSS-enabled
browser.
|
| |
| Benefits of using Style Sheets
-- (1) Building any Web site with a style sheet makes
formatting changes easier to implement. Rather than looking
through pages for all of the places you have implemented a certain
font size or color so that you can reformat it to match a new
"style," just change the style sheet and the changes
will "cascade" down to every page. |
| |
|
(2) Using Cascading Style Sheets improves a site's performance.
If a Course Developer formatted every paragraph on every page
using HTML tags, the extra HTML markup would increase each
file's size and download time. By contrast, a single CSS rule
can achieve the same effect of formatting every heading, subheading
and paragraph, no matter how many headings or paragraphs are
on the pages.
(3) When developers place all of a site's
formatting rules into a single shared style sheet file, the
browser downloads that file only once and reloads it from
the cache after that, further reducing download time.
|
| |
| Compatibility
-- Older browsers (version 3 and earlier) did not support
stylesheets. Instead of viewing the Web pages as developers
intended, users with older browsers viewed the pages with
default Internet colors, fonts and spacing. However, most Internet users have more recent browsers.
|
| |
|
|
| |
|
|
| |
| |
| |
