HTML & CSS DESIGN
( I am updating this site to include the latest Cascading Style Sheets and XML standards!) Go GO HERE for CSS coding tips!
Are you one of those guys or gals who does not want to use the
quick design pages or HTML Editors to design your page! That's great
if you're not, because this site is for you! I like to do it the
hard way, like you. Maybe it's my background in engineering or that I've
lived in several places including the home of the pony express (St. Joseph MO).
Now those were independent people, not afraid to do things risky
or the "hard" way and thus Missouri is known as the "show me" state!
Like you I was new at this and figured it out as I went along. I
assume you know how to steal, I mean copy, codes, graphics, etc. from
other's pages. If not, just go to the top menu and click on
view and then click
on page source. Or right click anywhere on the page and choose "page source". You should see something like
this:
This is the beginning portion of my homepage. What you see are called
Html tags. The actual tags are contained in
those half arrows,<> and tell the browsers, that your visitors
use, what to show. HTML tells your browser
that your using HTML. What you type between the
HEAD tags does not show up on your browser but contains info
about your document. What you type between the
TITLE tags does not show up on your page, either, but it is
extremely critical to identifying your site when search engines search for
sites. So, it is critical that you put exact words to identify your
sites or they won't get found and that's not cool!
<HTML>
<HEAD>
HTML DESIGN AND TIPS
</HEAD>
<TITLE>
HTML DESIGN
</TITLE>
<!--COLOR-->
<BODY BGCOLOR="#CC9999"
BACKGROUND="https://members.tripod.com/~vaulterjohn/ltgreen.gif" TEXT="#000000" >
<LINK="#FF0000" VLINK="#FF0000"<BR>
<!--HEAD1-->
<H1><p align="center"--><B>HTML DESIGN</B></p></h1><br>
<!--HEAD2-->
<h2><b><u>HTML TIPS</u><b></h2">
BODY BACKGROUND tags determine the background
color of your homepage. You can use solid colors which are represented
by a 6 digit number, in this case CC9999, which tells your browser to
show the color light purple. This color shows up when my page first loads but is then overridden by ligh green which is done as an image which I will discuss later. Point is you can do either for your background. You have to have < and > before and
after it, plus, a pound sign before it to make it work. Why? Just the rules.
You should see these numbers afterTEXT, LINK, & VLINK
. TEXT color is just that, color of your text. LINK color is
the color of your links before you click on them, whereas, VLINK is
the link color after you click on it.
The color code is made up of 6 digits, each 2 digits representing 1 of
3 colors, red FF0000, green
00FF00, and blue 0000FF . To make
these words different colors is easy, also. You use the font tag in
front and behind the word you want to color. To get the word red to be
red in color, you type this:
<font color=red> red</font>
So you can use words to get standard colors or combinations of numbers
and letter to vary the shades. There are lots of color charts that
show you the codes. A very basic one is at by VisiBone
By the way, I just created a link to get you to VisiBone. How did I do it? It's easy. You have to begin it with <a> and then the abbreviation HREF attribute to link to another site or the NAME attribute to link to a place on the same page. To do the VisiBone link above I simply typed this:
<a href="http://html-color-codes.com/"> VisiBone's Color Charts <a/>
To get a link to another place on my page, say I'm at the bottom and I want to link to the top. I have to name the link at the top first, called a target. I can even call it top and type that as the name like so:
<a NAME="top"></a> Put this at the top of your page.
Then I have to type the link to it like so:
<a href="#top">GO TO TOP</a> Put this at the bottom.
That's all there is to it.
You can also easily change the font of your type by using the font tag
but inserting the word faceafter font instead of color, like so:
<font face="Geneva">causes the type to look like this.</font> If you know the name of the type you want to use, say from your word processing program, just type it after the = sign and that's all there is to it. The first font family, Verdana, is included with Windows. The second font family, Helvetica, is included with Macs. The third font family, sans serif, ensures that if a computer doesn't have the Arial or Helvetica fonts, the computer will choose a font that looks like them.
Also, to make type BOLD just type <b> before and after the word. Like: <b>BOLD<b>. Since starting this site, the bold tag is being replaced with the strong tag. So you may want to use it?
To italicize your type just put a <i> before the type and a </i> after it. To underline your type just put a <u> before the type and a </u> after it. Notice that you have to tell it to stop with the forward slash /, or otherwise you underline everything. But still it sure is easy, don't you think?
Notice the little line I just made to separate paragraphs. You just type <hr> which stands for horizontal rule. If you place size=3 <hr size=3> you can make it thicker. It is clear, however. To make it solid type <hr noshade>. HTML code can be so easy, if you just know the rules!!!!!
Back to the background. you don't see the color
numbers mentioned above that followed background color, behind BODY BACKGROUND
because I'm using a mixed color or its called a wallpaper or
texture. In this case I used an image; "jpg" (jpeg)image or graphic.
"Gif" images use less file space. I copied this from
another homepage, with permission, of course. To copy any image on
the web, you just right click on your mouse and then click on
Save Image As . It asks you for a file name. I just save mine
in a file on my hard drive called "images." You then can upload these
to your file manager or whatever it's called. It's the place where
you start and save your web pages on Tripod or wherever. You are
allowed to upload to there by clicking on "browse" usually. Then you
type the address of that file, ie. https://members.tripod.com/~vaulterjohn,
enclosed in " plus, the name of the file, ie. /ltgreen (for light green).gif.
This gives you the light green background on my homepage. You use the same method to add textured backgrounds to your page also. There are lots of sites which have textured backgrounds. Tripod and all homepage host companies have them.
Simple, huh?
Now about images. They have to be linked in a different way. You use the abbreviations "img" and "src" in front of it. These stand for image source and tell your browser where to get them from. They can be in your file manager or on any other site, that you address, on the web. the following image is an image I borrowed from another site, but stored in my Tripod directory. It is coded like this <IMG SRC="https://vaulterjohn.tripod.com/blueletterbible.gif"></a>, resulting in this image:
Under HEADINGS there is one shown. Notice the h2 surrounding the headings! h2 gives you
Tables can be very complex, but a simple table is simple (duh!). Tables are made up of data, abbreviated td (table data) and rows, abbreviated tr (table row). Tables must start with the word table (duh)! Here is a table I created on another site. Let's evaluate it.
|
