HTML & CSS DESIGN


HTML & CSS TIPS

( 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:

<HTML>
<HEAD>
HTML DESIGN AND TIPS
</HEAD>
<TITLE>
HTML DESIGN
</TITLE>

<!--COLOR-->
<BODY BGCOLOR="#CC9999"
BACKGROUND="http://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">

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!

BACKGROUND COLORS

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



LINKS

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.


FONTS

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?


HORIZONTAL DIVIDERS

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!!!!!



BACKGROUND TEXTURES

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. http://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?

IMAGES

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="http://vaulterjohn.tripod.com/blueletterbible.gif"></a>, resulting in this image:


HEADINGS

Under HEADINGS there is one shown. Notice the h2 surrounding the headings! h2 gives you

this size

letters, while h3 gives you

this size

letters!


SIMPLE TABLE

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.

BYTE AMOUNT
DEFINITION
Byte 8 bits, or a single character. 10 bytes is a single word
Kilobyte 1,000 bytes. 2 kilobytes is 1 typed page
Megabyte 1 million bytes, or a small novel
Gigabyte 1 billion bytes, or 1 Pick Up Truck filled with paper
Terabyte 1 trillion bytes. 1 Research Library is 2 terabytes
Petabyte 1 quadrillion bytes. The WEB is 8 petabytes
Exabyte 1 quintillion bytes. 2 exabytes is all data produced annually

Here is part of the code:

<p align="left"><table> (places the table on the left)

<tr> (starts a table row)

<td><table width="0%"> (sets the width of the data in the row)

<tr> <td align="center"><table border="10" bordercolor="blue"> (sets the width of the border around the table and it's color)

<tr> <td align="center"><b><font face="Arial Narrow Special G1"><center>BYTE AMOUNT </font></B></td> (sets your font type and places "BYTE AMOUNT" in the cell)

<td><b><font face="Arial Narrow Special G1"><center>DEFINITION</font></B></td> </tr> (sets the word "DEFINITION" in the next cell and closes the cell-td and the row-tr)

You keep doing this for every row. You end with closing the table </table>.

There are lots more tips to give you and I hope to in the future, but these should get you started.

Well as I said since starting this site a decade or more ago, coding for the internet has evolved. An important addition is Cascading Style Sheets (CSS). Think of a series of playing cards with different styles coded into them so you don't have to keep adding tags telling the browsers what font type, size, color, paragraph indention, length, etc. you want. Instead these styles are put on each playing card and then linked into the html code. It cuts the amount of code down considerably! So, to do this we have to start out our html code placing a link into the style sheets, which are placed in separate files or folders on your server. Here is a simple way to start the code:

<html>
<head>
<link rel="stylesheet" href="html.css">
<title>HTML & CSS TIPS!</title>
</head>
<body>
<code for the page>
</body>
</html>
In the file html.css, add formatting for your html page. We use different tags on the CSS page, the { and the } tags. Also, each line ends with ;. If you want to hide code from showing in the browser add /* before and */ after the text. You would do this to put notes in the code, etc.
For its background, font type, size and color:

body {
background: #CC9999;
}
h1 {
font-family: verdana,helvetica,sans serif;
font-weight: bold;
font-size: 16pt;
}
h2 { font-family: verdana,helvetica,sans serif;
font-weight: bold;
font-size: 14pt;
}
p {
font-family: arial,helvetica,sans serif;
font-size:10pt;
}
li {
font-family: arial,helvetica,sans serif;
font-size: 10pt;
}
a {
color: #000000;
}

To code CSS on the html page we use <div> tags, division tags, which divide the page into blocks where the CSS will apply to every element in it without repetitive html coding. We can have divs for the header, menu (called navs), body (sides of the page, usually a background color or graphic), content (where your main text goes in the page center), sidebars (for colums on the right or left), and footers. There are lots of other divs available. Go to HTML & CSS In Pictures for a great and simple explanation of CSS and many of it's tags. Of course the ultimate site for CSS is http://www.w3schools.com/Css/default.asp which sets the international standards for all internet coding!

I'll cover FRAMES and a little Java later, plus, other things I've picked up. So stop back by! In the meantime visit some of the following sites for more help:

VisiBone's Color Chart

WebGround-How to

Bare Bones Guide to HTML





As a veteran, I recommend you check out this site
for some special veterans who kept us free by going to http://theyservedtheysavedsome.com


I assisted in the design of the following sites using HTML and CSS coding:
Go to this site for your vehicle care needs

Go to this site for original Mural and Graphic labeling of items!

Go to this site for shoe and leather good repair needs

GOD'S UNIVERSE | BIBLE AUTHENTICITY | MATTHEW 24 | FUTURE PROPHECY | CALVARY CHAPEL |
TABERNACLE |
HARRISON HOMEPAGE | NUTRITION | HEALTHY BYTES INC. | HTML TIPS | WATER SCIENCE |
Nedstat Counter

GO TO MY MAIN PAGE