Website Design United States, Website Design California, Website Designing United States, Website Designing California

Guide to Web Development

Basic

At this point you should be familiar with the HTML tags above and you may even have a few other tags committed to memory or have started to use some attribute tags or inline CSS Styles. At this stage you want to start to learn the more obscure HTML tags and really start to learn and know well tables, lists, frames, and some CSS.

1. Tables and all the fun you can have.
Prior to XHTML/CSS tables were used all over the place to handle the layout of the overall web site. These could get extremely complex and you might have an insane number of nested tables. You don't need to become a master of the tables because you should plan on moving on to XHTML and CSS will limit how much you use tables. But you will want to know how to use them and all their attributes. Tables can be tricky so you'll want to try different things with them.

2. Lists
Ordered lists, unordered lists, etc. are useful and will come in hand with XHTML/CSS for lists (obviously) and menus too. So learn them and get comfortable with them. No need to commit everything to memory for them because you might not be using them all that much.

3. Colors and the Web
For this you're going to want to be aware of and get use to "web safe colors". Not all colors look the same on the various browsers. And if you're making your own graphics with programs be aware that sometimes the same color code might not look the same as the color you put in your HTML code. --- Photoshop 5 use to change the image color when you saved it, unless you made the change to "web colors" under the preference section. You shouldn't worry about the image programs, you should be aware of the colors and how they act in various browsers.

4. Forms
Yes learn your forms and how to use them. It doesn't matter if you have JavaScript code to actually run the programs, just get use to forms and making them work. Make sure you know how to make the radio buttons, drop-down menus, multiple select menus, input areas (text, password, hidden, etc.) and text areas. Know the differences and know how to use them.

The links for this section are a bit limited because you're still learning all the HTML tags but now you're going to want to get better with all the attributes of the tags that you already know.

For some links you may want to check out the following sites:

http://www.w3schools.com/html/default.asp - Again the W3 School's HTML tutorial - but on the left look under the "Advanced" section and focus on that area. Also look at the "Lists" and "Tables" in the "Basic" section.

http://www.computersmiths.com/caliber/htmltutr.htm - Good tutorials with some more "advanced" html tag info.

http://www.computersmiths.com/caliber/htmlref.htm - Good list of other HTML tutorials.

http://www.lynda.com/hex.html - Info on the web safe color "problem."

What you should know from all of this

At this point you want to be really comfortable with HTML and its tags and their attributes. Also at this point you should be able to toss together a decent looking "HTML only" web site/page with out having to refer to outside sources. Meaning you can sit down at a computer and make the site/page without having to look up what tag attributes you need, or which tag you need to use. You should also be comfortable with the idea of web colors, which are "safe", their hex codes and even maybe their rgb(x,x,x) values. You don't need to commit those to memory, I mean if you can, well then you'd have NO problem committing everything HTML to memory too. You may even have started to use CSS with your HTML pages, which is probably a good idea.

EXTRA - Web Safe Colors

I was asked to add a little more to this tutorial about web safe colors. So here we go. Modern version of web broswers are doing a much better job at handling the color codes, both in rgb and hex. No longer are we seeing a great deal of difference in how the colors look on various broswers. But what does that mean to the web developer? Honestly it means little to us for the moment.

There are still people out there who are using older versions of broswers. While we could tell them to update their browser or even make a seperate style sheet to handle the colors we want to use properly we still run into the problem of the computer and monitor settings. People with older graphic cards and sometimes people with newer graphics cards might be limited to the number of colors that are displayed on their monitors. We need to be aware of that and attempt to work around this problem.

So what's the solution? Tell people to up the color settings? Tell them to get the current version of the browser they're using? Or should we program around it? The answer is... a little of all the above.

The first step in working around this problem is to try to stick to the web safe colors. Web safe colors are colors that will look the same on all broswers and with most color settings. I mean face it we can't really be expected to worry about someone who's still using a monochrome monitor.

Okay I've said "web safe colors" so many times here you're probably wondering what I'm talking about. Web safe colors use the three RGB (red green blue) colors to produce the colors that work well on computer monitors and even in print. Hex numbers like #003366, #99ffcc and #326699 are all web safe colors (in a second here I'll list all the colors for you). The formula is simple really... hex values of 00, 33, 66, 99, cc, and ff can be combined to form all the safe colors to use. You'll use them (for hex numbers) in #RRGGBB -

RR - Red
GG - Green
BB - Blue

You get the idea.

For the rgb(x,y,z) formula we just need to convert the hex numbers that are safe to a decimal value.

00 - 0
33 - 51
66 - 102
99 - 153
cc - 204
ff - 255

This just means that a hex color value of #9933cc would be rgb(153,51,204).

One last thing before we show you the web safe colors. If you're using these colors with a Cascading Style Sheet (CSS) you can use a shorthand version of the hex values. All you need to do for that is to use one of the hex values from each red green and blue "pair".

#000000 - #000
#33cc99 - #3c9
#66ff33 - #6f3

You can even use this shorthand form with non-web safe colors. The shorthand method is used by CSS and not something special to web safe colors.

#1155aa - #15a
#7788bb - #78b
#22ccaa - #2ca














 


© 2008-2009 dotnet4all.com