HTML & CSS: How do you make it look that way? Free web design training guide, lessons and resources by the Rochester Web Wizard. Sponsored by Data Info Magic web design service.

Free web design training service and resources by the Rochester Web Wizard @ Data Info Magic

HTML & CSS:

How do you make it look that way?

Disclaimer: It is becoming nearly impossible to sign up for a truly free website host. They are becoming harder to find than a unicorn. It is probably better to develop locally until you are ready for a low cost host.

A host is a server (computer with it's own software) different form your own (the client). You will also set up a server on your own computer to test things out before you FTP (upload) them to the server. There is client side code (HTML/CSS) and server side code (PHP, JavaScript), depending on which computer runs it.

The place I would start is at About.com. There is an extensive amount of free information, free online courses and an unlimited amount of information and links on this site. The free beginner courses are geared to a free Yahoo/Geocities website. Note: Yahoo/GeoCities is being discontinued later this year. Jennifer Kyrnin is an expert in the field and offers easy to follow instruction and advice. You can sign up for courses and newletters there. Before you progress to the next level sign up for the Free HTML Course. It is a good idea to take some simple pages and play around before going any futher. These may have what is called "inline" style design where the CSS is embedded in the page. Some may also have the CSS style at the top of the page in the heading section. Get familiar with the major elements of a page. Forget about the PHP for awhile. The CSS (cascading style sheet) gives it the styling while the HTML (hyper text markup language) gives it the content. The graphics could be in either place. You should always put your pages in a project folder including an images folder and your .html and .css files. If you have a page called home.html then the corresponding style sheet should be something like stylehome.css. It is very important to start this way from the very beginning.

There is also something called Tables Based as opposed to CSS Based designs. In truth you use both. The choice becomes clear as you go along. The trend is to emphasize CSS style sheets and add in Tables as needed. Older code uses exclusively Tables, making editing very difficult.

The cheapest (free) quickest and easist way to get started is to sign up for a free website, however these are becoming harder to find than a unicorn. Every one I checked has shut down in the recent past. I used one for less than a week anyway before out growing it. You can get started in minutes and view your work live on the Internet! You will soon outgrow it, but it is easy to upgrade or move your site to a different server when you are ready. You also have ads along side your pages. None of this will matter much with your first website.

There is WYSIWYG software (what you see is what you get ) online to let you design and modify your site. You can easily generate pages without ever seeing a line of code, but you give up control and certainly won't learn anything.

When you are ready for more control over your designs, move up to a paid hosting site. You are now ready for XHTML and CSS.

I do not sell or profit from any of the items mentioned here!

Don't spend a great deal of money on reference books until you have a very good idea of what to look for. Generally look for books that have examples to follow and a website where you can download the code. Stick to one book per topic at first.

XHTML

The HTML holds the contents of the page. The X on XHTML stands for eXtended. You will now need a paid site with some type of FTP or file uploading capability. Your file names should have a .html extension (although .htm works and is a leftover from previous operating system versions). I can't give you all of the information here but I can tell you where to get it quickly, cheaply and easily!

You will need at least one book for reference. I would suggest HTML, XHTML & CSS (Visual QuickStart Guide Series) Here is a review from the Barnes & Noble site that states it perfectly: Posted March 3, 2009, 1:28 AM EST: I was always under the impression that learning HTML was difficult and you had to be a computer programer to even begin to understand the code until I picked up this book. I examined this particular book and compared it to a famous brand DIY book. This HTML, XHTML & CSS book was easier to understand and straight to the point. I created my website using a Yahoo template because I figured all I had to do was type information in the desiginated boxes. I found out that's all I could do, was type. I couldn't bold, center, underline, or create links with this particular template, program, or whatever you want to call it, without knowing HTML. This book saved the day for me. I highly recommend it. ElayneB

The Visual Quickstart series offers a great deal of information at a low cost and small format.

I have set up Joombla but decided it wasn't something that I wanted to use. It is really for people who wish to do their own sites. WordPress is similar. The same is true for OSCommerce and ZenCart ecommerse software. They are all free and open source. You may like to do that. There are people who specialize in it for a fee also and they would be relatively easy to find. I don't make specific referrals. You do need to set up XAMPP/Apache as a local server and know a little bit of PHP/MySQL to test them locally before going live on the Internet, which is what I always do. Find out more @ the DataBase page.

Your ultimate goal should be to make a complex index page that you like and then make a one, a two and a three column version with the same header and footer. You can then use them as your own templates for future development. Try making both fixed and elastic versions.

CSS

The CSS part gives the page it's style or look of the design. The Cascading Style Sheet corresponds to the HTML page and has a .css file extension. Example: index.html has a style sheet name styleindex.css. If you fiollow this from the beginning, your web design life will be much less complicated.You can get the information in the same manner that you did with the XHTML. It is really impossible to seperate these topics except by function.

A Template is just a purchased design that can be modified in pretty much any way, including colors and graphics as well as layout (to some extent). I design custom pages to match the design of the main page. It is just a starting point. I have a membership in a design service called Template World so there is no cost to my clients if they find a design there. Since I'm not a trained artist or designer, it saves time and gives them ideas as well as saving them money. There is a link on my template page where you can view them. You don't have to register or pay any money unless you decide to join or purchase one for your own use. Templates require PhotoShop to fully modify them. There is also a section of free designs for my "virtual students" to practice with. Most developers use them but just don’t tell you. I also have the capability of furnishing any custom design based on anything the client wants. I just charge slightly more because of the time involved.

There are thousands of free open source templates at OSWD for personal or noncommercial use. It is also good to get hold of a free template that you can edit and use to learn the code. There are many simple ones available on the about.com site and many more available at Template World. You can find countless web sites for quick reference. Instead of trying to memorize code, wait until you have a good editor like RapidPHP with auto complete and reference code to model after. You will automatically learn it as you go. The general rule is that if it doesn't look right in preview, you did it wrong.

I apologize for not giving you more original information here, but it would be impossible to cover thoroughly and would be redundant. You just want to get your feet wet and move on. Your learning will be in a spiral, not a straight line.