CIMIC/MUSIC - Introduction to the Internet

Problem Summary and Presentation

Summer Camp Week 3

Advanced PowerPoint

It is expected to learn how to draw figures and to import objects such as image from other sources.

Including Images in HTML

By now you have noticed almost all WWW pages have pictures or images on them.
These are called "In-Line" images.
In word processors like WordPerfect or MS Word, you can paste in pictures where you want them and they become part of word processing file.
With HTML, you simply make a reference to an image file in your directory.
1. Graphics Interchange Format - GIF
2. Joint Photographer's Experts Group - JPEG (pronounced "Jay- Peg")
Tag is called IMG. Also need to supply the "source" of the image - the file name.

Here is my picture:

HTML Code	Result

There are various options for the IMG tag that dictate:
1. Where the image will show up on the page
2. How the text will flow around the image
The ALIGN option:
- LEFT
- RIGHT
- MIDDLE
- TOP
- BOTTOM

HTML Code	Result
	Here is my picture: and here is some additional text.
	Here is my picture: and here is some additional text.
	Here is my picture: and here is some additional text.
	Here is my picture: and here is some additional text.
	Here is my picture: and here is some additional text.

Background Images - Textures

It is also possible to have an image show up as a background for your entire page.
The image will be "tiled" - repeated over and over to cover the page.
Most often used are textures such as paper, wood grain, and other backgrounds.
Use the BACKGROUND option of the BODY tag:
Note: This example will look bad as well.

Where to get Background Images

Collections of Background images abound on the Internet
Use a Web search engine to search on "Backgrounds".
As of March 22, 1996, here are three such sources:
1. http://www.execpc.com/~jeffo/webdes/webstuf.html
2. http://www.isisnet.com/mlindsay/images.htm
3. http://www.teleport.com/~mtjans/VBM/ The Virtual Background Museum

Pre-Formatted Text

There are times when you have a piece of text that is already formatted. e.g. you want it displayed ``as is''.
Several ways to do it. PRE, XMP tags
The <PRE> tag stands for Pre- Formatted. However, any HTML tags inside of <PRE> and </PRE> are interpreted.
The <XMP> tag stands for Example. Any HTML tags inside of <XMP> and </XMP> are not interpreted.
Note that resizing the browser window has no effect on pre-formatted or example text.
Examples:

HTML Code	Result
	I want this text here. And this over here. And this one here.

Creating Your Own Images for the Web

You may create an electronic image using any of the available graphical software. There are many types of image format (such as: TIFF, BMP, WMF, PICT, JPG, JPEG, GIF, and others). In order to post an image on your web page, you need to have it in JPG, JPEG, or GIF image-type format.
There are many graphical software available on the market (such as Paint, Draw, CorelDraw, etc.). In order to create an electronic image to be post on the internet, make sure that you use a graphic-editor software which can save (export) your image in JPG, JPEG, or GIF type format. For our class, we are going to use a graphic-editor software called SMARTDRAW.
STARTING SMART DRAW
To start SmartDraw software, open a SmartDraw Program-Group within the Program Manager. Double click on the icon: "SmartDraw 3.1 Trial Edition (Win31)". On the "Trial Edition of SmartDraw" dialog box, click on the "Continue" button. On the "Welcome to SmartDraw" dialog box, click on the "OK" button. On the "Create a New Drawing" dialog box, click on the "Type" field and select "Empty Drawing". Finish the selection by clicking on the "Create" button at the lower-right side of the dialog box. You will be left with an empty and white drawing space.
Drawing a Simple Image
Let us try to draw a simple house. A house can be drawn using a rectangle (for the body of the house) and a triangle (for the roof of the house).

Web Page Authoring

There are several ways to create WWW pages.

By hand

As the class has been doing thus far.

Use a text editor to put in each HTML tag.
You must keep track of links (HREF), colors, graphics, styles and overall look and feel of the pages.
Good because you can get started right away.
Also, learn HTML directly.
Not so good for larger projects where coordination of links, etc. becomes a problem.

HTML Specific Editors

A text editor with special commands or buttons to insert HTML codes for you.
A slight improvement.
Good because tags at right there for you to select from.
Not so good because most only run under MS Windows - not UNIX.
Example: HTML Assistant Pro v2.0.

[HTML Assistant
Editor Image: htmlassi.gif]

HTML Assistant Pro 2.0 Page http://fox.nstn.ns.ca/~harawitz/index.html
HTML Easy! Pro http://www.seed.net.tw/~milkylin/htmleasy.html
Sausage Software - HotDog Web Editor http://www.sausage.com/
SoftQuad - HoTMetaL Pro http://www.sq.com/products/hotmetal/hmp-org.htm

Style Sheets for word processors

These include special styles and macros for text and lists, etc. Example: MS Word Internet Assistant.

Microsoft's Internet Assistant for Windows 3.x http://www.microsoft.com/pages/deskapps/word/ia/default.htm
Microsoft's Internet Assistant for Windows 95 http://198.105.232.6:80/msoffice/freestuf/msword/download/ia/ia95/
CU_HTML.DOT - Word Document Template http://www.cuhk.hk/csc/cu_html/cu_html.htm

Web Authoring Environments

More sophisticated tools that track linking of URLs, graphics and overall look and feel of a complete web site. Also may include tools for VRML - Virtual Reality Modeling Language.

Silicon Graphics WebFORCE Product line. Very high-end tools for multimedia web authoring.
http://webforce.sgi.com

Automated web page creators

Found on the Internet. Take you step by step through creating a WWW page.

Justin LaPierre's PageGen
"This is PageGen, the Interactive HTML Authoring Tool. You select different properties for a web page, and PageGen will create the page for you. You need Netscape 1.1 or something that will support tags used by Netscape."
http://www.channel1.com/users/justinl/pagegen/

Saving a Netscape Page and Graphics

It is possible to save an HTML page off of the WWW in a file on your own disk.
Follow these steps. Assume disk is in Floppy Drive B:
1. Use Netscape to navigate to the WWW page of your choice.
2. Open the File menu and choose Save As.
3. A dialog box will appear. Change the drive to match where you have the floppy disk. B: in this case.
4. Give the page a file name. Make sure the extension is three characters. e.g.
  myfile.htm
5. Click on the OK button.
It is also possible to save just a single graphics image in a file on your own disk:
1. Use Netscape to navigate to the WWW page of your choice.
2. Use the mouse to point at the image or graphic and click the Right mouse button.
3. A menu will pop up. Choose the option to Save Graphic.
4. A dialog box will appear. Change the drive to match where you have the floppy disk. B: in this case.
5. Give the image a file name. Typically there will be a default name given. Make sure the extension is three characters. e.g. myimage.gif
6. Click on the OK button.

Last update: July 20, 1998
Source provided by Rich Holowczak
Edited by Dong-Ho Kim