| HTML
|
 What is HTML?
-- The Hyper-Text Markup Language (HTML) 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,
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 online pages by clicking View --> Source
(or Page Source).
|
|
To view the HTML source code for the Site Map, click the button. |
| [Note: 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 this website.] |
|
| |
|
HTML
from Scratch -- Creating
HTML pages "by hand" or "from scratch" involves typing all the tags on each page. Many website developers
consider this the "old fashioned way," but some of us still
create our pages "by hand" instead of developing by "drag and drop." Why would someone want to
use that slower method instead of the quicker drag-and-drop
or document conversion method? Because coding "by hand" offers the developer a greater level of flexibility and precision. I still create all of the pages on my websites "by hand" - probably out of habit.
|
| |
|
|
| |
|
|
| |
| 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 webpage authoring tools, from the most elementary (and
free) to the sublime (and expensive). HTML Editor applications
are essential for building and maintaining websites.
Text Editors -- On the inexpensive
end of the spectrum, users with a solid knowledge of HTML can
create every webpage 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 HTML applications. WYSIWYG
stands for "What you See is What you Get." With these
programs, users can just drag-and-drop text blocks and graphics
onto a blank 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 the pages
ever load once they are created. Be wary of extra code because it make webpages 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 should know how to use this application, whether or not they use it regularly. |
| |
| The Bottom Line --
A working knowledge of HTML is required
for developing webpages, even if the developer uses a WYSIWYG drag-and-drop program. Fixing, tweaking and cleaning
up webpages 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. Although JavaScript is not
compatible with old browsers, more recent Internet browsers have no problem running JavaScript events. |
| |
|
|
| JavaScript Events
-- Developers use JavaScript "objects" to create various "events"
on their webpages. 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 Internet browsers. In the beginning, DHTML was only supported by Internet Explorer. DHTML is not as commonly used as JavaScript. In fact, I haven't seen DHTML listed in a job description for 10 years now. However, it did have its hayday and you may come across it on an older website. |
| |
|
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 webpage 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 webpages. CSS is a flexible,
cross-platform, standards-based language used to suggest stylistic
features applied throughout entire websites. 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 website with a style sheet makes
formatting changes easier to implement. Rather than scouring
through the tags for all of the places you have implemented a certain
font size or color so that you can reformat it, just change the style sheet and the changes
will "cascade" down to every page of the website. |
| |
|
(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 webpages as developers
intended, users with older browsers viewed the pages with
default Internet colors, fonts and spacing. However, today most Internet users have recent browsers.
|
| |
|
|
| |
|
|
| |
| |
| |
