PDA

View Full Version : HTML Workshop


Darth Eggplant
02-27-2003, 05:52 PM
*this is for Sanspoof
or anyone else.
it is also just lessons
on basic, very basic HTML;
if anyone wants to add
to this thread please do so,
but do not get technical
or assume that it is intuative.*

Lesson 1 Gemini Brackets

just like the twins (Gemini)
in the zodiac, most if not all
html coding goes into matching brackets
like bookends. there are some exceptions
but for a rule of thumb always think
in two's. now using asterisks so you can
see the code (when you html yourself,
do not use them, you have
*< >* being opening bracket
and *</ >* being closing bracket.
the lucasforums use *[ ]* and *[/ ]*
when I create html doccuments I always
use *< >* I think until you get good,
stay simple and safe and use *< >*

now another rule of html
is first one in is last one out.
so if you say
*<font><b><i>*
end with
*</i></b></font>*
if you use the vB code buttons on forum
then you are using basic html already.

now another thing about brackets
is order of operations,
just like in math you add first,
subract, divide....
html must go as follows,
*<html><head></head><body></body>
<foot></foot></html>*
your head is above your body
(or at least I hope it is,
your body is in the middle
and your foot or feet below.
and all of this has to inside
a complete html doc or the html
will not work. with html a small
mistake, miss a bracket miss a .
miss a " or mispell a word
fnot (font cause wierd and scarry
stuff to happen.

Sanspoof
02-28-2003, 02:40 PM
I know the easy stuff. Just tell me how to get in DIY-made pictures, how to make font and font colour and that and how to get background colours and pictures. That'll be all I need.

QueZTone
03-01-2003, 01:59 PM
Sanspoof, first always say thank you,
otherwise Eggplant mind find you boo.

And now to your question mixture,
images, font colors and how to add a picture,
I'll explain each seperatly below,
in seperate alineas in a vertical row

To set a certain font and properties that come with that bag,
you should really try and use the <font> tag,
To visualize a text with a red colour, a size of 2 and type tahoma,
you will use <font face=tahoma size=2 color=red> and get your font diploma.
(Do not forget the </font>)


For pictures you use another tag syntax,
the <img src="image.gif"> will bring your joy to max
Note that the <img>-tag requires no closing,
because it simply doesnt encaptulate anything flowing.
If the image is in another directory,
adjust the source accordingly

The background color of your website is set in the body,
early explained in eggplant's story
If you want your page to be green,
<body bgcolor=yellow> will do ya mean

Of DIY-pictures I have never heard or seen,
so please enlighten us about that, Commander Keen.

Sanspoof
03-02-2003, 07:49 AM
It means Pictures you make yourself.

009
03-02-2003, 11:02 AM
This (http://www.htmlgoodies.com) might be helpful.

So could this (http://www.webmonkey.com).

Darth Eggplant
03-02-2003, 02:39 PM
okay Sanspoof
I will deal with your question
about font type color etc,
but first lesson two titles, heads etc.

remeber when you put the GF disc
in your computer and the installer
screen pops up? well you'll notice
if you did, if not go see it,
that along the title bar,
that thin strip at the top of any
open box or window is the title bar,
very handy because it tells you
grim fandango installer screen.
this is useful because once you
program a large site with multiple
pages they are like titles
and sub titles so you do not get lost.
the title must be inside the head
section of your html doccument
and it goes like this.

<html>
<head>
<title>
Sanspoof the Little Kitty Who Could
</title>
</head>
</html>

now this is not an exciting page
but you need to know how to walk
before you fly. that way when you
or someone else is at your site
they can quickly identify what page
they are on. aslo found in the head
section you will place sounds.
*note they can be elsewhere but
placing them here is a good idea.*
*also note sound is a bitch
even on fast computers,
and not all comps and browsers
handle them well.*
so you may want to skip them.

I find sites with sounds
are a pain in the ass
cause while I am playing my music,
the computer is trying to force me
to listen to some silly plinkely midi
elevator musak file. but sound is up
to you. another thing which goes
into the head, and it is a later
more advanced lesson the META tags.

If you want bot, spiders, crawlers
and search engines to find you,
you better include some meta tags.

now the half part of the lesson.
font and color.

fonts:

fonts can be handled two ways
using H1 to H5 tags
(5 of them I believe, there may be more)
or buy saying font size.

the H way is an easy way
because it creates fonts
according to default sizes
for example H1 is like a news paper
headline so it is honkin' big.

Honking big!

something like H3 is normal type
on a page of paper off a type writer.

type writter size


or on this forum use

size = 1


size=2


size=3 etc...


for the above in [ this kind of bracket
i used the vb code commands of
<size=1> </size>
<size=2> </size> etc
to show you the results.
the H's do the same thing.
you will have to create a folder
in your HD and try making pages
and experimenting with these codes
so you can see what you are doing.
and the great thing is your computer's
browser can open an internal address
as well as a web one. on the web you say
http://grimfandango.com/imdex.html

but in your computer you say
c:\sanspoofs training page\index.html

*note your home page has to be
for the most part INDEX. there may be
exceptions but stick to this.

and also all your code commands keep
them the same, if you use capitals
<BODY> </BODY>
dont switched to
<body> </BODY>
or you may screw your HAL9000 up.

*also I learnt that this forum
liked IMG and not img
case sensitivity is important.

so if you are not using the H's
saying <H1>BIG</H1>
or on this forum the S's
<size=4>BIG</size>
BIG

then you will use font like thus.
<font size=5>
this is your font on 5
</font>

this is your fonts on drugs!

and if you want to add to this
then you say face to mean the type
of font you are going to use.
However face regulated how you see
a TT font or .tft file in your computer.
if you say

grim fandango rules!!!


once agin font style only happens
if and when the person browsing
your site has that type font installed.
for example I just used the type font
called dango after grim fandango
all forum members with this font
willl see grim fandango rules
in GF game font.
all others will not.
and these forums use different vb coding
that html code text
so in notepad and you use notepad
to hack out your html
you say this:
<font size=6 face="dango" color="ghostwhite">
grim fandango kicks serious ass!
</font>

*note your size perameters
do not show up in "quotes"
but your face and color must always
and not this either "dango'
that gets you nada.
so does color="bleu" or colour="blue"
computers like those Yanks out there
have gone and bastardized the Queen's
english and PC's do not understand colour
(you might say they are colour blind.)

the other things you can do to font codes
are this <b> for bold type </b>
<i> for italic type </i>
and <u> for underlined type </u>

so you can say
Darth Eggplant is a HTML Guru
or
Darth Eggplant is a HTML Guru
or
Darth Eggplant is a vB code god
or

Mr Tall Guy aka Mod extrodinaire

or you can say

ooo color


but in html coding it is this:
<font size=5 face="dango" color="white"><b>
</font></b>

Now young Padawan D'ni pupil
this is enough of this for now.
next lesson or if someone else does
it first I will talk about backgrounds
there are two sets of commands
back ground colour
and back ground tile.
a bg tile is whatever you make it
size, jpg, gif, animated gif
the skies the limits.
a bg colour has to be an official
hexidecimal value code color
or it will not work.

but colour and images are next lesson.
I ned to take a Kit Kat break now:D

Sanspoof
03-02-2003, 04:14 PM
Thanks, guys! Cheers!

Darth Eggplant
03-04-2003, 11:22 PM
okay Sanspoof,
and or others, color.
you can create color
in your type font
and color for your websites bg
'background'

the code for this is this:
<body bgcolor="black">
or
<font size=5 color="black">

*now computers actually understand
the hexidecimal color code
a series of alpha numeric values
which produce color.
in the case of black,
the hexidecimal value
for black is #000000*

you could code
<body bgcolor="#000000">
and it would work,
but memorizing six figure
alpha\numeric values well I can say
I'm not up to the challenge.
most people are not
so computers have been taught
to go along with us
just saying black, blue,
yellow, red etc.

*but the color has to be
one of the hexidecimal colors.
for instance you could type
in as a color

spectacular sanspoof silver

however I doubt the computer
would give you such a splendid shade.
and so for your education,
I give you all the colors
of the hexidecimal rainbow.
(there may be more out there)
however this list is quite extensive
and I think you will be able to find
a shade to suit you.

"If the Blue Casket
was not blue,
what colour would it be?"

aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedaimond
blue
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
navajohwhite
navy
oldlace
olive
olivedrab
orange
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen

*all the names of the colors
must be spelt like they appear.
seagreen and not sea green
or you will not get seagreen,
you will get some random color*

next lesson I will give you
a background tile.

Darth Eggplant
03-09-2003, 04:10 PM
okay so if you want to make a background
the code is this:
<body background="asylumtile.jpg">

*please note use whatever image you have
instead of asylumtile.*

**also if you are going to make a bg tile
make sure your images line up,
(very fiddly) so that no lines, spaces
or other distracting thingies make
your page's wallpaper look bad.
try using my avitar as a backgroundtile
you'll find you page full of eggplant
goodness. you can use gif, animated gifs
jpg's even bmp's whatever.
and like image, background color,
these html codes do no have pairs.
no <body></body>
just <img> <body background> <bg color>

Tall Guy
03-10-2003, 10:06 AM
actually i think <img src="image.gif" /> is the standard but it works without the end tag anyway. nice tutorial darth ;)

Darth Eggplant
03-10-2003, 09:39 PM
it's mainly for Sanspoof and only basic html anything real fancy needs a good html program or serious prgraming there is a cool thing called flashmx for great flash page designs and stuff

Sanspoof
03-12-2003, 03:31 PM
I am now in progress of making my website. If you feel like doin' nuttin you can check it out. so far it's utter crap. Nothing special, just some words and adverts. But the world shalt revolve...

www.cybcity.com/sanspoof