|
HTML and Scripting information by Wayne E. Manzo,
Editor, Publisher, Website designer, and Human Rights Leader
|
|
OBJECTIVE:
Develop interesting and professional web pages using
simple HTML CODE, JAVASCRIPT,
photo images, and web-based
development tools.
|
|
|
If you have a computer and higher-end web publishing
software why concern yourself with this stuff? I will
be showing you why professional web pages look so nice
and the simple HTML CODE that can be used to develop
such web-pages. This tutorial is for anybody interested
in learning about how easy it is to generate professional
hand coded pages with simple HTML and JAVASCRIPT.
This tutorial assumes that you already know the internet
basics, can load the browser program(start the browser
program),
|
know the "world-wide-web" address protocol,
and the different file types such as "gif", "jpg", "html",
"htm", etc...
And have a free web account on either
oocities.com
or
tripod.com. You can do these excersises
off-line using a text editor while storing your files
on your hard-drive, but since I am homeless and use
the internet as my personal computer and design station,
all these excersises will be performed online with the
files being stored on Geocities, Tripod, or one of the
other free web page sites.
|
|
Tables are the dominant "element" of good web design and
before you start writing any html code or even think
about desiging a page with one of those fancy web-site design
application programs, you should first sketch out the page
appearance.
The page should be composed of various sections
or "elements". Think of a paragraph of text as
an element, an image with a border as an element,
a feedback form as an element, a title in a bordered
box as an element__just about anything you plan
on putting on the page can be considered and
element.
And if you web design like I do, you'll enclose
most of those elements in tables, which becomes
part of the element__so then all tables are elements?
I suppose so.
This is three nested tables,
the outer two tables are needed
to create the black border
|
|
|
|
Break the page down into individual components, elements,
or sections and then sketch the large page table that
is going to contain all those elements. Remember,
the page table shouldn't be very complicated because you
can always "nest" tables(put tables with-in tables).
In the old days of 100mhz machines this caused problems
because the CPU's dogged down trying to calculate the
position of the nested tables__with 200mhz machines and
faster(Gig machines) this is no longer a problem.
Once you get the main page table designed you can concentrate
on the smaller elements(tables) that will be nested into the
main page table. So, tables are one of the most important
element of page design(in my book anyway) and we'll spend
alot of time learning what we can do with tables.
Before I continue you should be aware that the two major
browsers, Netscape and Bill's Internet Explorer, respond
slightly different to table html but with a little tweaking
you can get the tables to look pretty much the same in each
browser____
wem Aug 30, 2002
|
|
|
Main Page Table
|
Section 1, border=1
width=700, height=150
column span=2
|
|
|
Section 2
|
height=300,
width=50%, colspan=1
|
|
|
Section 3
|
height=300,
width=50%, colspan=1
|
|
|
Section 4
|
|
height=400, colspan=2
|
|
| |
|
Interesting web design starts with an idea of what you would
like the page to look like___sketch the design and then even if
you don't know anything about html or javascript or programming
just use your imagination and start writing ideas on your
sketch pad. Maybe just a page with images that can be clicked
on for larger image viewing? Maybe some sliding layers or
link buttons that change when moused on___dynamic html and
javascripting is very simple but very powerful.
Most books on html and javacript make it difficult to understand application because the script is written by and for computer programmers not web developers. The simple layers below define the main structure of my new home page. If you look at the source html
you'll note that I do not have access to a graphics work station
and that I use the "crop" attribute of the the "Div" tags in
order to manipulate images. With a graphics program the html
would be perhaps 50% smaller in size. The graphics were obtained
from the web or my own scanned "plastic lense photos"__the
graphics are then simply edited using either the online
image tool at "www.iquato.com" or "www.gifworks.com". Note,
iqauto has a jpg to gif conversion tool and gifworks has
"artistic" and "color" features. So, I sometimes convert my
jpgs to gifs then use the features at gifworks. And, if I don't
need the transparent color feature of the gif image, I use
iqauto.com to convert the modified image back to the smaller
jpg file format.
As shown in the source code, this main layer of tables is nested
or embeded in the outer main table. The html for the new
home page is located in a different layer named "Mansue_Site_072004"
and positioned in the main table layer "Table_Text_1".
Both of these layers are nested or embeded in the outer layer
"Main_Outer" so that if you were to use javascript to move the
"Main Outer" layer all the inner layers would move also(if there
are no html errors).
function Move_Main_Layer_Right(){
document.all.Main_Outer.style.left = 100;
}
function Move_Main_Layer_Back(){
document.all.Main_Outer.style.left = 0;
}
|
Moving the main layer for centering in high resolution screens
or for whatever reason is simple as:
And, clicking on the text causes the javascript functions
to fire.
Move Main Layer Right 100 pixels
Move Main Layer Back
Notice the source html "a href" tags are very simple.
a href="javascript:void(0)
ONCLICK="Move_Main_Layer_Right()"
Boy, this stuff is tricky! Well, if its written by a C++++++
or JAVA programmer you probably couldn't figure out what they
are doing. I write "human" javascript so that anybody can follow
the logic. Also, I use to write programs for the "Netscape"
browser because I only had access to library computers with
"Netscape"__then I started using other libraries that used
only "Internet Explorer" so I code only for IE and not for
the other browsers. The logic is the same and you can make
your pages work in various browser windows. Me, my stuff
is censored anyway so why bother. With those simple functions
you can move the world__well, not really, but you can move
any layer anywhere in the page. And if you add a timing loop
and coord(x,y) incrementation, you end up with a sliding layer that can be started and stopped by various page events__and ta-da! A dynamic interactive multi-media page using technology that is decades old.
Also note that the space for my revised main page structure
is obtained by using the table element height attribute.
Set at "500" this gives me a space of 500 pixels where I can
position the "page structure layer". But what happens if the
text size is changed in the tables above? That's right, all
the tables shift downward or upward and the positioning of
the "page structure layer" stays the same. How can the page
be designed so that this type of shifting doesn't occur?
__WEM, July 04, Columbus
|
| .
|
|
|
width = 765
|
|
|
|
Page 0
|
Page 1
|
Page 2
|
Page 3
|
Page4
|
Page 5
|
Page 6
|
Page 7
|
Page 8
|
Page 9
|
Page 10
|
|
|
| .
|
|
THE PUBLISHER:
......
Wayne E. Manzo
|
|
|
| .
|
|
|
|
