ESL_Home: CALL resources main page | Site Index
About: Vance | Vance's papers and presentations | RSS feed: AdVANCEducation
Related pages: Authoring | HTML | JavaScript | CGI | HTML derivatives | Web services

Learning and using HTML

Navigation: Learning HTML | Reference Information / e.g. Colors, Accessibility | Why learn HTML | Design considerations | Choosing an HTML Editor | Utilities aiding in Web page design | Clipart | Presentation software (e.g. PowerPoint)

Learning HTML

Vance Stevens (that's me!) has created a bit of html that illustrates in easy steps some of the basic concepts of HTML. It's purpose is to show you enough to be able to troubleshoot if you encounter problems with code. Find it here: http://www.homestead.com/prosites-vstevens/files/pi/very_basics/starthere.htm (last seen Jan 2008)

Wikiversity has a page that purports to "defines the competency required to design, create and save a simple mark-up language document to a given specification using a text editor rather than an authoring tool" The authors helpfully reword that: "Basically, that means you'll be able to create simple web pages to current standards without needing expensive software." In other words, HTML. And it links to the Wikipedia entry on HTML, which is quite useful: http://en.wikipedia.org/wiki/Html

Created for Becoming a Webhead, 2006: http://tciaffaroni.edublogs.org/

Tripod has a set of HTML tutorials in the form of "Handcrafted" newsletters which have been archived at http://www.tripod.com/build/better_builders/archive.html. (last seen April 2004) They also have:

Writing HTML: A tutorial for creating web pages, from the Maricopa Center for Learning and Instruction is available at http://www.mcli.dist.maricopa.edu/tut/index.html (last seen April 2004)

Winni van Gessel has a comprehensive online computer course including a tutorial on basic HTML to enable anybody to write their own web pages, and continuing through special effects with java script applets, chat rooms, etc. The HTML portion is at http://sweb.uky.edu/~wvang00/sayre/html.htm (last seen April 2004)

Joe Burns maintains an excellent site with Primers, Tutorials, and a Beyond HTML section: http://www.htmlgoodies.com/ (last seen April 2004)

Andy Carvin's HTML Crash Course for Educators est aussi disponible en français! - http://www.edwebproject.org/htmlintro.html(found Feb 2007 at its new URL)

Washington State University Intensive American Language Center Microlabs has a Web Authoring Resources section. Find it at http://www.washington.edu/computing/accessible/resources.html (last seen April 2004)

Page Tutor by Joe Barta is at: http://www.pagetutor.com/pagetutor/makapage/index.html (last seen April 2004)

Here are some web sites created by teachers for teaching other teachers HTML.

^Back to top

HTML Reference Info:

Background colors:

Lists of background color codes can be found at:

To set up a download from a web page

HTML Accessibility

^Back to top

More on this web site (but it's light reading at this point ...)

Learn (about) Java Script and CGI 
Derivative html languages; e.g. dhtml ...

Scott Dagilis's http://www.otlhelp.com

On this page ...

Why: What pedagogical purpose will it serve?
Web design considerations
A selection of HTML Editors
Web page enhancement utilities
Clip art collections
Presentations
Learning HTML yourself
HTML reference info

What's New with HTML?..... Educational Web Design Workshop--ICE Conference, January 2002---Indianapolis, IN http://www.siec.k12.in.us/~west/proj/present/index.html; "Includes Learn to use DHTML (Dynamic HTML), including JavaScript CSS (Cascading Style Sheets)" - seen June 2002

In this page, there are topics which will shortly be integrated with other areas of this web project. These are those concerning:

Authoring utilities utilizing html
Authoring utilities utilizing JavaScript

Why learn HTML?

You don't have to learn HTML to design web pages. You can use any number of wsiwyg editors or adapt other people's materials, but the more you learn about how it works, the more versatile you can be as a practitioner. And to the degree your materials are web-based, they become more portable and accessible to you and other users not only in your workplace but throughout the world.

For example, if you use Front Page, you might find that it produces bloated code and does not always introduce elements where you think they should be (hyperlinks for example can extend unexpectedly into unwanted display items, it might be hard to paragraph the way you want in wysiwyg, etc.). Front Page provides CODE and SPLIT views where you can see exactly what code you're producing, and if you understand the basics of working with that code, just the very basics, then you can resolve problems quickly by working in the code window rather than experiencing frustration with the seemingly intractible wysiwyg editor.

Some references:

http://www.htmlgoodies.com/
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
http://members.aol.com/teachemath/class.htm
http://www.davesite.com/webstation/html/
http://www.jmarshall.com/easy/html/
http://werbach.com/barebones/

In attempting to explain the benefits of teaching with a projector hooked up to a computer in the classroom, my theory is that this works for the same reason that you put tools in the hands of carpenters; you can't necessarily predict in advance the results, and the outcomes are largely serendipitous. Although I have taught from such a configuration in Oman and have specified this as standard at my places of work ever since, I've found it difficult to articulate just what it is about having a network and software at your fingertips that works so well in a language class.

^Back to top

Web design

Some specs for Internet project design for language learning can be found at http://www.imsproject.com Xenu Link Sleuth reports 502 Error response received from gateway July 26, 2002

See more stuff you can do with your web capability

See where to get free web space

Learn more about authoring tools, many of which are increasingly web-based 

The site below contains an article about writing specifically for the web. The site also contains a wealth of links for web authors. (09 Sep 1999, Peter Nichols <peternichols@rocketmail.com> MLI)

Using Microsoft Word to create web pages

Word is an excellent tool if your purpose is to convey information in an attractive, interactive way, with minimal graphics support, and without frames. As long as your graphics are not huge, the result should load quickly into any browser. To create this very website, I (Vance) have used a variety of tools at different times, but the one I used most extensively in the 20th century has been good ol' Microsoft Word 97. I am simply writing and formatting the same as I would in a word processor, but I "Save As" HTML. (When I installed Word, I had to check-in this feature - it was not the default setting, so if you are using Word and don't have the HTML capability, you might want to reinstall it).

I have written some tutorials in Word both illustrating and explaining some of the features in Word for creating web pages. Click here to see the tutorial.

There are a number of other HTML editors you can use, and you can also learn HTML and compose in the source language if you wish, but those of us who know some HTML prefer to work with an application that allows focus on presentation rather than coding. Learning the basics of HTML is a good idea at a later stage when you start to take command of the medium. Impatient? Click here to start learning now.

 

Your browser will probably allow you to see the HTML code for this or any web page. In Netscape, it's View - Document Source, and in the Internet Explorer, it's View - Source.

In fact, looking at source code is a good way to learn "Hey, how dey do dat??!"

Click here if you'd like HTML explained.

Tripod has a set of HTML tutorials in the form of "Handcrafted" newsletters which have been archived at http://www.tripod.com/build/better_builders/archive.html.

Clicking here takes you to a list of other HTML editors now.

 

Enhancing your web pages

Nettie says: "You can download shareware and demo software from a number of sources. For those of you who don't know HTML or don't want to know it, you can use a WYSIWYG editor (What You See Is What You Get) like Front Page, PageMill, Coffee Cup, etc. These are available from places like:

http://www.tucows.com
http://www.davecentral.com
http://www.nonags.com
http://www.adobe.com
http://www.microsoft.com
http://www.claris.com

... I will tell you right now, the best resource on the Internet for learning how to make web pages is to look at the View Source in your browser. That will tell you all the code that is being used in the pages you are looking at! This is where you can learn some of the neatest tricks on the Net." (end of Nettie's bit)

Clicking here takes you to a list of other HTML editors
Click here to see a listing of enhancement software you can try out.

 

How not to enhance your web pages

Claire Bradin suggests "Why Frames Suck (Most of the Time)" at http://www.useit.com/alertbox/9612.html . It also has a section called "When It's OK to Use Frames."

Here's How: More Details

Choosing an html editor

Barely post-'last century', but as an archive:
Many of the following editors were recommended by teachers in a productive thread on Neteach in which Ron Corio asked what others were using to design their web pages. This list has since been augmented. And in a Nov 29, 2002 posting to IATEFLComputerSig@yahoogroups.com, Subject: Re: [IATEFLComputer Sig] free webeditor: The best free WYSIWYG editors are AOL Press, Amaya, FrontPage Express and Netscape Composer. If you want something comparable to Dreamweaver, but a lot cheaper, try Namo WebEditor.

Ready-made templates for free at http://www.steves-templates.com/

Adobe PageMill (drag'n'drop, easy download and install, 30-day trial); SiteMill for site management includes PageMill

AOL Press: Mac and Windows installers are available here <-- Xenu Link Sleuth reports 502 Error response received from gateway July 26, 2002 available to everyone, not just members; homepage at: http://www.aolpress.com/

Apple: The Apple Web Page Construction Kit is available at http://www.apple.com/education/webkit/. Links here are to a Tutorial, Infor about cutting-edge Internet software developers, and examples of sites created with the kit. The Apple education home page is at http://www.apple.com/education/

Arachnophilia http://www.arachnoid.com/arachnophilia/ (ok, Nov 2006)

Barebones: BBEdit Lite, BBEdit 4.0 - http://www.barebones.com/ (Mac only?)

Claris PageWorks Time Limited Demo - (MAC & PC) - http://www.claris.com Xenu Link Sleuth reports 502 Error Repsonse from Gateway July 26, 2002

Coffee Cup (a text-based editor) - http://www.coffecup.com

Derekware

Dreamweaver, free 30 day trial version, http://www.macromedia.com; Tutorials at http://www.internet4classrooms.com/on-line_dw.htm

Flexsite, Lincoln Beach Software, http://www.lincolnbeach.com/ Xenu Link Sleuth reports 502 Error response received from gateway July 26, 2002

Hippie 98, a "groovy HTML editor" for Windows 95, 98, or NT, http://chkpt.zdnet.com/chkpt/expa19990225/www.hotfiles.com/?000DEH

Homesite 2.5 (there is a 'Lite' freeware version; Toolbar editor inserts HTML) - http://www.allaire.com ; Another site for HomeSite 2.5 is http://www.bradburysoftware.com/

Hot Dog via Sausage.com (click on icons to insert html commands) - http://www.sausage.com/

Hot Dog via fourthnet

I've been using Hot Metal Pro http://www.softquad.com for a long time. I like it. It produces clean code. Nothing fancy - Vance

HTML Assist (freeware)

HTMLGrinder (let's you make the same change in a batch processing manner to any group of files specified)

Netscape Composer is a component of Netscape Communicator, free, WYSIWYG, cross-platform, intuitive. Find it at http://www.netscape.com or one of the download sites like http://www.download.com (at the latter you can often find an installation file; whereas Netscape may require you to stay connected during installation).

RichLink Author is a free download software program which allows you to create html pages with pop up boxes for annotating text. Download from http://www.sentius.com

TextPad – This is essentially a text editor i.e.Notepad replacement, but if you want to get at your code, TextPad has features that make it easier for you than using Notepad: http://www.textpad.com/download/index.html to Download TextPad 4.2

WebWizard is a form-based "editor"

^Back to top

Some utilities of use in web design

Image manipulation reported by Knowplace, Jan 2007: FreeSerifSoftware.com < http://www.freeserifsoftware.com/default.asp > Founded in 1987 to develop low-cost alternatives to high-end publishing and graphics software programs, Serif has consistently been praised for its powerful yet easy-to-use software' Check out their free software programs for photo and image editing, graphic design,webpages and desktop publishing.

WCET, the Western Cooperative for Educational Telecommunications (http://www.wiche.edu/wcet), and C2T2, the Centre for Curriculum, Transfer & Technology (Victoria, British Columbia, Canada, http://www.c2t2.ca), have announced the launch of EduTools (http://www.edutools.info), a Web-based resource for the higher education community. EduTools was built to assist higher education in using a more rational decision making process to review the many options in course management systems. EduTools is a redevelopment of "Online Educational Delivery Applications: A Web Tool for Comparative Analysis" developed by C2T2 and Bruce Landon, of Douglas College in British Columbia. EduTools' researchers review each product using the producer's Web site resources, a product demo, and a set of guiding questions. A variety of analyses are available to users of the site: they can compare specific products for instance, or can ask for a list of products containing specific features. WCET is also developing three new companion sites that apply the same decision-making models for comparisons of other tools. These new sites, set to debut over the next year, will analyze student services software and service providers; e-learning policies; and instructional technologies.

Free Web Publishing Tools - "Everything you need to publish online is here -- and it's all free: HTML editors, image tools, color pickers, database converters, code validators, servers, and more:" http://cgi.zdnet.com/slink?7653:2827884

WebReference.com - The Webmaster's Reference Library, FREE NEWSLETTER and more info at <http://www.webreference.com/>. Your one-stop Web dev resource, 8-time Winner PC Mag's Top 100. Daily JavaScript, D/HTML, Design, 3-D/VRML, E-Commerce, how-tos - from PC Webopaedia Newsletter, Vol. 2, Number 12, July 15, 1998

Jay Oram recommends "the site created by David Siegel, who wrote "Creating Killer Web Sites". It is full of info and links related to web design, in the sense of "graphic design"; http://www.killersites.com

Here's more:

 

On a thread in Neteach on 3D Impact Pro, Truna recommended ZyGraphics (generates a range of texts via the web itself) at http://www.zyris.com/zygraphics/; Another one to explore is the Banner Generator Form at: http://www.coder.com/creations/banner/banner-form.pl.cgi

From The GeoCities World Report, Vol. 3, No. 1: Enhance your home page with a 3D Photo Cube from Intel. After you customize it with six of your favorite photos, visitors can zoom in on each image with a single click or visit another URL of your choice when they double click. I put a photocube in my family home page, but the script is probably no longer supported, and I've left this note here just as a reminder to remove the page.

This page is a sample table that you can use if you want to for attendance or assignments for your students. Those of you who know HTML can just edit it in code, those who don't can use an WYSIWYG HTML editor to play around with it. You can find a selection of editors at http://www.tucows.com or http://www.davecentral.com.

From: dwinet@transbay.net
Date: Sun, 09 Nov 1997
Subject: Class discussion boards (free!)

Group email lists are good for discussion, but online web based message boards are better in some ways...more colorful, and it's easier to keep track of who has and hasn't contributed something. You can get one for your class for free by going to http://www.Lpage.com and filling in the info, then cutting and pasting their HTML to your webpage. It's really not too hard and you'll be happy with your new board...I guarantee it! :-)

Sincerely,
David Winet, Coordinator, EFI, http://www.study.com

^Back to top

Clip Art and Animations

 

Here's an example of adapting / repurposing html code you can get off the web and save to your computer:

If you have a little free time on your hands, try writing a quiz similar to the following one about your home state.

Just "save as source", change the parts that need to be changed and send it to us (iteslj@ge.aitech.ac.jp). We can then put it online as part of our self-study quiz project.

^Back to top

Honing your Presentation Skills

You can use presentation software to create presentations which can then be converted to html with varying degrees of effectiveness. Here are a few options:

Power Point 

PowerPoint helps you make eye-catching presentations which can be saved as html documents. Using the Save as HTML capability in the Microsoft product, you get screen dumps of the slides without animations or events. Plus, the quality of the slides leaves a bit to be desired.

Real

There is also a Real Networks product which will convert Power Point presentations to html, and preserve events and animations. Look for it on the http://www.real.com website. At Real you can also get Real Slide Show, which allows you to drag images and sounds onto a timeline to easily create cool presentations compressed for web delivery.

Macromedia

With a little greater learning curve, Macromedia products Flash, Authorware, and Director, available at http://www.macromedia.com, can help you produce presentations. Flash is essentially an animator and can be integrated with web pages. Using Authorware and Director you can produce professional presentations of great variety, and deliver them over the web through the Afterburner process.

There is an interesting Flash graphics site at http://www.eye4u.com/. In particular, I like their musical generator, at http://www.eye4u.com/showroom/websynth/websynth.htm

For comments, suggestions, or further information on this page
contact Vance Stevens, page webmaster.

The TOP part of this page (not the archival part) was
Last updated: May 1, 2008 - 06:00 GMT

Copyright 2008 by Vance Stevens
under Creative Commons License: http://creativecommons.org/licenses/by-nc-sa/2.5/

February 2, 2007

Mirrors: This page is available at: