Odds and Ends of HTML

Some Neat Code Elements and other features of HTML

Some Windows Functions

Alt + Tab

Hop between open applications. Hold down the Alt key and tap the Tab key one or more times to cycle through the open applications

Alt + Esc

This also toggles among open windows. Hold down the Alt key and tap the Esc to move between open applications

Ctrl + Esc

Displays the task bar and shows the start menu

Software: Let’s You Edit Code—Use These to Create Web Pages

Notepad (save as All Files)

FrontPage 2000 ( click HTML tab)

Word 6 or earlier (save as plain text)

WordPerfect, MS Works, or ClarisWorks (pre 1997 versions)

Hot Dog, HTML Assistant, or HTMLed ( text-based shareware HTML editors)

Software: Hides or Messes up the Code—Do Not Use These

WordPad (will not save text documents properly)

FrontPage 98 (wrecks the HTML code)

Microsoft Word 95, 97, or 2000 (hides code, rewrites your code)

WordPerfect 9 or 10 or Claris Home Page (won’t let you write HTML without a fight)

HotMeTaL or InContext Spider (shareware that hides the code)

Netscape Composer (replaces code with a mess)

Adobe PageMill (full of bugs, hides HTML code)

Nesting Lists

You can nest an ordered list within an ordered list

Create a list with bullets and items with numbers under it

example

Slide 6

Web Page Design

Overall visual effect

Apply your HTML skills wisely

Way elements fit together on the page help to communicate your message

Key Elements of Page Design

Spacing

Wrapping text around an image

<img align=“right” /> or <img align=“left” />

<br clear=“right” /> (clears to bottom of picture)

Hspace command adds space on the top and bottom of picture

Vspace command adds space to right and left

Command <img src=“cat.gif” align=“left” width=“140” height=“100” border=“3” hspace=“20” vspace=“5” />

Background Banner

You can use image graphics to create borders on the side of the page or at top or bottom.

You can create images that act as borders, rules, images breaks for your text

OR you can place an image as the background and have the text move and the image stay stationary

Image Attributes—Tag <img />

Stationary Background

To keep your background still and the text moves over it

Part of the Body command

bgproperties=“fixed”

This keeps the background color or image stationary and the text moves over the page

Sounds

Sound is great but a problem because the two major browsers do it differently

Netscape uses EMBED tag

IE uses the BGSOUND tag

To fix for both use the following code

<NOEMBED>

<BGSOUND SRC=“mysound.wav” LOOP=“1”>

</NOEMBED>

<EMBED SRC=“mysound.wav” AUTOSTART=“true” LOOP=“1” “HIDDEN=“true”>

Video

Embed also works for placing video on the page

Needs to be in Windows .avi format

To start a video and repeat it as long as the page displays looks like next page

Place immediately after the body command

Sample

<body>

<embed src="3dtetra2.avi" autostart="true" loop="true"

   width="160" height="120" vspace="10" hspace="20"

align="left" />

<noembed>   <a href="3dtetra2.avi">

   <img src="3dtetra.jpg" border="0" align="left"

width="160" height="120" vspace="10" hspace="20" /> </a>

</noembed>View Sample at http://24hourhtmlcafe.com/hour16/video1.htm Video

HTML Help

For assistance the best site is the HTML Compendium

Here you can find all the codes

Just copy and past the code elements from the view source page and substitute your words or other elements

http://www.htmlcompendium.org/Menus/Oframefy.htm

Hit Counters and Guest books

Two most popular things people want on web pages

Check the following places for samples

http://www.digits.com

http://saturn.guestworld.tripod.lycos.com

http://www.TheCounter.com

http://www.chami.com/counter/classic/

Java Applets

Small program created using the Java language

insert the code and modify as needed

Applet Depot

http://www.ericharshbarger.org/java

Java Boutique

http://www.javaboutique.internet.com

Sample Applet

Movement on a page is great to focus interest

The slide applet is one of the most popular

Get the applet at JavaBoutique

Several free ones to choose from

Slider

Slidepuzzle

SlideShow

SlideWays

SlidingText

Samples in Action

Slider lets you bring in information from the top and loads extremely fast

Sample Slide from Top

Layer slide allows action from the left side of your page and again extremely fast load

Sample File Screen

Java has so many different applets available to do very exciting movement on your pages

Interactive Animation Tools

Macromedia Flash

http://www.macromedia.com/downloads/

Animation Shop

http://www.jasc.com/

Tutorial located at http://www.pinoy7.com/tutorials/

FTP

Getting Your Page on the Web

FTP

File Transfer Protocol

What you must know

The web address of your ftp server

The user login name

The user login password

Most web hosts will provide this information when you sign up for a space on the FTP server

What you need???

Some files to transfer

An FTP program

Free popular programs

Cuteftp

Ws-ftp

Both available at http://www.tucows.com

How do you do it???

Log in to your host

You must have an active Internet connection before beginning the transfer

Open you ftp program

On one side will be the location of the files you want to transfer

On the other side will be your web host files

Drag and Drop

Just drag the files you want to transfer

OR

Identify the files you want to transfer and select Transfer from the menu

(Depends on which ftp program you use)

Your files are transferred

Go Live

Your site is live

Before you Go Live be sure

You have proofed your work

You have checked your links

You have everything in the same folder

You have all your references noted on your pages

So Let’s Go

You have all the tools

You have a great deal of knowledge

I look forward to seeing your final web sites tomorrow!

Where to Go? Free Web Space

Tripod (edit, load, modify from any Internet connection) http://www.tripod.lycos.com

Angelfire http://www.angelfire.lycos.com

Geocities http://www.geocities.yahoo.com

Cybercities http://www.cybercities.com

Slide 32

Sources

Oliver, Dick. Teach Yourself HTML. Macmillan Computer Publishing, 2001.

http://www.htmlcompendium.org

http://24hourhtmlcafe.com

http://www.shareware.com

http://www.javaboutique.com


	Alt + Tab
		Hop between open applications. Hold down the Alt key and tap the Tab key one or more times to cycle through the open applications
	Alt + Esc
		This also toggles among open windows. Hold down the Alt key and tap the Esc to move between open applications
	Ctrl + Esc
		Displays the task bar and shows the start menu


	Notepad (save as All Files)
	FrontPage 2000 ( click HTML tab)
	Word 6 or earlier (save as plain text)
	WordPerfect, MS Works, or ClarisWorks (pre 1997 versions)
	Hot Dog, HTML Assistant, or HTMLed ( text-based shareware HTML editors)


	WordPad (will not save text documents properly)
	FrontPage 98 (wrecks the HTML code)
	Microsoft Word 95, 97, or 2000 (hides code, rewrites your code)
	WordPerfect 9 or 10 or Claris Home Page (won’t let you write HTML without a fight)
	HotMeTaL or InContext Spider (shareware that hides the code)
	Netscape Composer (replaces code with a mess)
	Adobe PageMill (full of bugs, hides HTML code)


	You can nest an ordered list within an ordered list
	Create a list with bullets and items with numbers under it
	example


	Overall visual effect
	Apply your HTML skills wisely
	Way elements fit together on the page help to communicate your message


	Wrapping text around an image
		<img align=“right” /> or <img align=“left” />
		<br clear=“right” /> (clears to bottom of picture)
	Hspace command adds space on the top and bottom of picture
	Vspace command adds space to right and left
	Command <img src=“cat.gif” align=“left” width=“140” height=“100” border=“3” hspace=“20” vspace=“5” />


	You can use image graphics to create borders on the side of the page or at top or bottom.
	You can create images that act as borders, rules, images breaks for your text

	OR you can place an image as the background and have the text move and the image stay stationary


	To keep your background still and the text moves over it
	Part of the Body command
	bgproperties=“fixed”
	This keeps the background color or image stationary and the text moves over the page


	Sound is great but a problem because the two major browsers do it differently
		Netscape uses EMBED tag
		IE uses the BGSOUND tag
	To fix for both use the following code
		<NOEMBED>
		<BGSOUND SRC=“mysound.wav” LOOP=“1”>
		</NOEMBED>
		<EMBED SRC=“mysound.wav” AUTOSTART=“true” LOOP=“1” “HIDDEN=“true”>


	Embed also works for placing video on the page
	Needs to be in Windows .avi format
	To start a video and repeat it as long as the page displays looks like next page
	Place immediately after the body command


	<body>
	<embed src="3dtetra2.avi" autostart="true" loop="true"
	width="160" height="120" vspace="10" hspace="20"
	align="left" />
	<noembed> <a href="3dtetra2.avi">
	<img src="3dtetra.jpg" border="0" align="left"
	width="160" height="120" vspace="10" hspace="20" /> </a>
	</noembed>View Sample at http://24hourhtmlcafe.com/hour16/video1.htm Video


	For assistance the best site is the HTML Compendium
	Here you can find all the codes
	Just copy and past the code elements from the view source page and substitute your words or other elements
	http://www.htmlcompendium.org/Menus/Oframefy.htm


	Two most popular things people want on web pages
	Check the following places for samples
		http://www.digits.com
		http://saturn.guestworld.tripod.lycos.com
		http://www.TheCounter.com
		http://www.chami.com/counter/classic/


	Small program created using the Java language
	insert the code and modify as needed
	Applet Depot
		http://www.ericharshbarger.org/java
	Java Boutique
		http://www.javaboutique.internet.com


	Movement on a page is great to focus interest
	The slide applet is one of the most popular
	Get the applet at JavaBoutique
	Several free ones to choose from
		Slider
		Slidepuzzle
		SlideShow
		SlideWays
		SlidingText


	Slider lets you bring in information from the top and loads extremely fast
		Sample Slide from Top
	Layer slide allows action from the left side of your page and again extremely fast load
		Sample File Screen
	Java has so many different applets available to do very exciting movement on your pages


	Macromedia Flash
		http://www.macromedia.com/downloads/
	Animation Shop
		http://www.jasc.com/
		Tutorial located at http://www.pinoy7.com/tutorials/


	File Transfer Protocol
	What you must know
		The web address of your ftp server
		The user login name
		The user login password
	Most web hosts will provide this information when you sign up for a space on the FTP server


	Some files to transfer
	An FTP program
	Free popular programs
		Cuteftp
		Ws-ftp
	Both available at http://www.tucows.com


	Log in to your host
	You must have an active Internet connection before beginning the transfer
	Open you ftp program
	On one side will be the location of the files you want to transfer
	On the other side will be your web host files


	Just drag the files you want to transfer
	OR
	Identify the files you want to transfer and select Transfer from the menu
	(Depends on which ftp program you use)
	Your files are transferred


	Your site is live
	Before you Go Live be sure
		You have proofed your work
		You have checked your links
		You have everything in the same folder
		You have all your references noted on your pages


	You have all the tools
	You have a great deal of knowledge
	I look forward to seeing your final web sites tomorrow!


	Tripod (edit, load, modify from any Internet connection) http://www.tripod.lycos.com
	Angelfire http://www.angelfire.lycos.com
	Geocities http://www.geocities.yahoo.com
	Cybercities http://www.cybercities.com


	Oliver, Dick. Teach Yourself HTML. Macmillan Computer Publishing, 2001.
	http://www.htmlcompendium.org
	http://24hourhtmlcafe.com
	http://www.shareware.com
	http://www.javaboutique.com