HTMLAtlantiscodeguide

HTML CODE and Picture GUIDE

HTML Code Guide
Insert an Image or Pictures
To Scroll across text
to set up a link
Image Maps
FRAMES
Tables

HTML Code Guide

<HTML>

<HEAD><TITLE>Enter page title as it will appear on browser title</TITLE>

REDIRECT CODE
Go to old page for example webatlantis/TheAtlantisTrailBolivia.htm
To redirect to new page insert code below after the title line
<META content="0;URL=http://www.geocities.com/theatlantistrail" http-equiv=REFRESH>
leave rest of page coding
OR, after the title insert
<META content="0;URL=http://www.geocities.com/theatlantistrail" http-equiv=REFRESH> then delete rest of page except
</HEAD>
</HTML>

the following is normal page code

<HTML>

<HEAD><TITLE>Enter page title as it will appear on browser title</TITLE>

</HEAD>

<BODY bgColor=blanchedalmond text=navy>……….note spelling of Color
This background color is "ivory"

or use an image as background
<BODY BACKGROUND="A:\HTMLcodeandpictureguide_files\parchment.jpg">

Create header eg bold, copperplate gothic light, size=6 sometimes given as 28pt

<align=center><B>The Atlantis Trail</B</FONT><BR>

or use <H1> to </H1> where H1 is largest and H6 is smallest, font, bold, centered

Atlantis: The Case Against Thera

The first sample title is given as H2 as in

<H2 align=center>Atlantis: The Case Against Thera</H2>

Atlantis – The Case Against Thera

The second title in blue and also in BOLD is given as
<font face=arial color=blue size=5><B> Atlantis – The Case Against Thera</B>

(Optional) define body text size as BASEFONT

<BASEFONT Face=Arial Size=3 color=blue> then can use <Font size=+1> etc

or specify text size and style…..1 = small, 3 = normal, 6= large

<Align=left>

<Align=right>

<ALIGN=Center>

<align=justify>FILM PRODUCERS like lost cities. But a lost city which may lay beneath the ground or beneath the waters of a lake large enough to be an inland sea is of little use to them as producers also like ruins.

Change background, text color, link, visited link and active link colors

Change text color

Change font, font size and text color

<FONT=Arial size=3 color=pink>

<B> gives bold…</B> ends bold

<I> gives italic…</I> ends italic

<P> ends a line and leaves a space before the next one.

<U> gives underline…</U> ends underline

<B><U> gives bold underline</U></B> ends bold underline

<BR> ends a line

to leave multiple line spaces, enter <BR><BR><BR>……. would give three line spaces

or <P> </P> gives extra line spaces

   ……gives 3 character spaces

& gives ampersand &

 gives soft hyphen –

à gives à

Á gives Á

é gives á

é gives é

Ñ gives Ñ

ñ gives ñ

ó gives ó

ç gives ç

To Scroll across text (only supported by Explorer)

<Marquee align=middle height=10 width=80% BGcolor=pink scrollamount=3 behavior=scroll scrolldelay=3 direction=left hspace=0 vspace=0 loop=infinite>This text is scrolling </marquee>

This text is scrolling

<Marquee align=middle height=10 width=80% BGcolor=pink scrollamount=3 behavior=scroll scrolldelay=3 direction=left hspace=0 vspace=0 loop=infinite>here is a picture<IMG SRC="HTMLcodeandpictureguide_files/iconblue100.jpg"> of the lost island</marquee>

here is a picture

of the lost island

Then listen, Socrates, to a tale which, though strange, is certainly true. For these histories tell of a mighty power....

To Indent

text here, gives indented margins left and right

</BLOCKQUOTE>

To create a list

here is list

<OL>

<L1> basket of fruit<BR>

<L2> peach melba<BR>

<L3> vanilla ice<BR>

</OL>

basket of fruit
peach melba
vanilla ice

Definitive list

<DL>

<DT><B>Candidates for President

<DD>Frank James, Jesse James etc

</DL>

<PRE>

gives text as typed ie formatted

</PRE>

To create a rule line

To create a full widthrule line simply use <HR>

Insert an Image or Pictures … make sure address gives correct folder or disk

The image could be on disk or in webpage folder

use IMG align=center align=top or align=bottom command to align caption text to center, top or bottom of image

This caption is aligned to the center of the image but if I write too much the rest comes out underneath.

use <br clear=all> to clear following text to a new line

This caption is aligned to the center
of the image and I used <br clear=all>to continue on a new line

if no align command, text continues at base of image

Here is some sample text which would now continue underneath the image.

Use Img align=left or align=right to wrap text to image

In fact every single aspect of Plato’s detailed geographic description can be seen not to be found on Thera.

To begin with, it is not even in the right location, after all, Plato said that Atlantis was "at a distant point in the Atlantic ocean opposite the Pillars of Hercules" which the Encyclopaedia Britannica defines as the Strait of Gibraltar.

Give more space horizontally either side of image

<IMG align=left SRC="HTMLcodeandpictureguide_files/blueladies.jpg" Width=220 Height=130 hspace=20>lots of text here is now 20 pixels away horizontally from image called blueladies.jpg

lots of text here is now 20 pixels away horizontally from image called blueladies.jpg

Give more space vertically before and after image

the image is now is now 40 pixels away vertically from above text and the continuing text is 20 pixels horizontally away from the image called blueladies.jpg

In fact every single aspect of Plato’s detailed geographic description can be seen not to be found on Thera.

To align text beneath image use

Text between two images

<IMG SRC="Worldmaps.jpg" align =right Width=150 Height=100 Border=0>the text follows here and appears between the two images

Make sure to clear image with <BR> to new line or next image will not align correctly

Image with title, use ALT="title" appears on arrow or link hand

to set up a link

also see main website <A HREF="http://www.geocities.com/webatlantis" >HISTORIC ATLANTIS IN BOLIVIA </A>

also see main website HISTORIC ATLANTIS IN BOLIVIA

A link with text and picture
<A href="http://www.geocities.com/webatlantis">Jim Allen's <IMG align=center alt=webatlantis height=100 src="http://www.geocities.com/myessays/iconblue.jpg" width=180><B>Historic Atlantis in Bolivia</B></A>
Jim Allen's

Historic Atlantis in Bolivia

<A href="http://www.geocities.com/webatlantis"> <IMG align=center alt=webatlantis height=100 src="http://www.geocities.com/myessays/iconblue.jpg" width=180><B>Historic Atlantis in Bolivia</B></A>
Historic Atlantis in Bolivia

Image as a link without text

Change link colors

<BODY BGCOLOR="BLUE" LINK="WHITE" ALINK="WHITE" VLINK="YELLOW" TEXT="YELLOW"> note alink and vlink should be different colours to background colour

Link small picture to a bigger picture

Add clickable text to left of clickable picture

<A HREF="HTMLcodeandpictureguide_files/iconblue.jpg">Click here for bigger picture<IMG align=center SRC="HTMLcodeandpictureguide_files/iconblue100.jpg" width=120 height=65 border=2 ALT="webatlantis"></A>

Click here for bigger picture webatlantis

Add clickable text to right of clickable picture

<A HREF="HTMLcodeandpictureguide_files/iconblue.jpg"><IMG align=center SRC="HTMLcodeandpictureguide_files/iconblue100.jpg" width=120 height=65 border=3 ALT="webatlantis">Click here for bigger picture</A>

webatlantis Click here for bigger picture

Align clickable picture and also align clickable text top, center or bottom

<P Align=center> <A HREF="HTMLcodeandpictureguide_files/iconblue.jpg"><IMG align=center SRC="HTMLcodeandpictureguide_files/iconblue100.jpg" width=120 height=65 border=2 ALT="webatlantis">Click here for bigger picture</A>

webatlantis Click here for bigger picture

Picture with clickable link beneath

<IMG alt="webatlantis" height=183 src="HTMLcodeandpictureguide_files/iconblue.jpg" width=480> <BR clear=all>
<A HREF="HTMLcodeandpictureguide_files/iconblue.jpg">Webatlantis</A>

Webatlantis

email link

Mail me at <A HREF="webatlantis@hotmail.com" >webatlantis@hotmail.com</A>thanks

Mail me at file:///A:/webatlantis@hotmail.comthanks

To Link to a specific part of a page note first go to the relevant part of the target page, select a word in the destination text eg Pictures and mark the HTML code with the following code around it
<A NAME="Pictures">Pictures</A> where >Pictures< is the actual word in the source code and "pictures" becomes the link word on the original page which will send the programme there.

Then add the A HREF code with destination URL on the original page eg

<H2 align=center>HTML CODE and <A HREF="A:\HTMLcodeandpictureguide.htm#Pictures"> Pictures</A>GUIDE</H2>

HTML CODE and Pictures GUIDE

note A HREF= in URL titles, no dots commas or spaces in filename except .com etc

Note local picture file could be on floppy disk eg

Or on main computer disk c harddrive

Or full URL address

<A href="http://www.geocities.com/myessays/myindex.htm"> http://www.geocities.com/myessays/myindex.htm

In Geocities, to publish homepage (HistoricAtlantisinBolivia) use File Manager to rename as index.html and the URL address becomes same as chosen site name
i.e. with Geocities site I.D.=webatlantis
site URL becomes
http://www.geocities.com/webatlantis

Create delayed link insert in heading after title where "5 represents delay time in seconds

eg the following code displays an animation for 5 seconds before moving to AtlantisRelatedSites

<HTML>

<HEAD><TITLE>Links to Atlantis related Sites</TITLE>

</HEAD>

<BODY>

</BODY></HTML>

Alternatively "0 would send webpage directly to new site (say you have created a new website to replace old one)

<HTML>

<HEAD><TITLE>Links to Atlantis Related Sites</TITLE>

</HEAD></HTML>

Image Mapsnote image cannot be given height = and width = spec in image bracket

Use paint Shop Pro to get image coords for top left corner and lower right corner of section of main image which is to be linked to webpage

<HTML><HEAD><TITLE>Atlantis Trail IMAGE MAP</TITLE>

</HEAD>

<BODY>

Clickable Map, click on any name to see a picture

</MAP></Body</HTML>

About Thumbnails

Reduce the size of images eg GIF Wizard from Raspberry Hill Publishing http://www.raspberryhill.com/ or http://www.gifwizard.com/PGW

Use a compressed image to link to a bigger image, not good to just make smaller in <IMG> tag

Or resize in Paint Shop Pro eg full size double print = 131KB,

resized to 565x227 = 28KB or to 150 x 100 = 9KB sizes in pixels

Embed sound

<EMBED SRC="filename" width=144 height=74> puts a small sound player on webpage

<EMBED SRC="filename" hidden=true autostart=true> plays sound once without player button on page

loop=true (plays indefinitely) loop=false (plays once only)

FRAMES

The text or contents of each frame is stored in separate files, on floppy disk (A:/), or hard-drive (C:/) or Internet URL (http://www. etc) for example myessays/frame1.htm and myessays/frame2.htm

store the mainpage as say Comparative Weights of Materials with own URL say

http://www.geocities.com/myessays/ComparativeWeightsofMaterials.htm

The whole page (screen) is now divided into frames where cols=width and rows=height,
for example changing the row to say 50% would reduce the height of the following frame
or changing the cols % would reduce the width of the following frame

<HTML>

<HEAD>

<TITLE>Comparative Weights of Materials</TITLE>

</HEAD>

</FRAMESET>

</HTML>

frame1 could be an URL address such as http://www.geocities.com/myessays/frame1.htm
and frame2 could be an URL address such as http://www.geocities.com/myessays/frame2.htm
or an URL address such as http://www.geocities.com/webatlantis

The mainpage with its own URL could for example compare say Blavatsky (Lost Treasure of the Incas.htm) and Arica.htm so the two frames open into existing .htm essays or webpages eg

http://www.geocities.com/myessays/BlavatskyArica.htm

<HTML>

<HEAD>

<TITLE>compare Blavatsky tunnels and Arica</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Another example of two frames might have a small frame (cols=20%) which gives an index of links to associated pages, and these pages open into the wider, second frame.

<HTML>

<HEAD>

<TITLE>New Arts Centre</TITLE>

</HEAD>

</FRAMESET>

</HTML>

The following example of two frames gives a wide frame across the top and a smaller frame across the bottom of the screen. (rows=80%)

<HTML>

<HEAD>

<TITLE>New Arts Centre</TITLE>

</HEAD>

</FRAMESET>

</HTML>

for examples of three or more frames see floppy disk

Tables

Feature Jowett R.G.Bury Desmond Lee

Truth
Then listen, Socrates, to a tale which, though strange, is certainly true Listen then, Socrates, to a tale which, though passing strange, is yet wholly true Listen then, Socrates. The story is a strange one, but Solon, the wisest of the seven wise men, once vouched its truth.

HTML CODE GUIDE

This coding creates a box frame,
<TABLE border=1 borderColor=black cellPadding=7 cellSpacing=0 width="100%"> <TBODY> <TR> <TD vAlign=top width="80%"> <P style="TEXT-ALIGN: center">
enter text and pictures here
<H2 align=center>HTML CODE GUIDE </H2>
</FONT></FONT> <P></P></TD></TR></TBODY></TABLE>

Type the name or hex code of your chosen colour into your document, or swipe it with the mouse and use CTRL+C and CTRL+V to copy and paste.
Magenta FF00FF	LightBlue ADD8E6	Blue 0000FF	DarkViolet 9400D3
LightCyan E0FFFF	LemonChiffon FFFACD	Yellow FFFF00	Lavender E6E6FA
Ivory FFFFF0	MintCream F5FFFA	Orchid DA70D6	Silver C0C0C0
LightSalmon FFA07A	Turquoise 40E0D0	DarkGray A9A9A9	Wheat F5DEB3
Red FF0000	Peru CD853F	Crimson DC143C	Gold FFD700
Green 008000	DarkKhaki BDB76B	RosyBrown BC8F8F	Tan D2B48C
PaleGreen 98FB98	LimeGreen 32CD32	SeaGreen 2E8B57	DarkGreen 006400
Indigo 4B0082	Purple 800080	Navy 000080	Black 000000