A free template from Joomlashack

A free template from Joomlashack

Home
Learn HTML and CSS Print E-mail
Written by Christopher Bumgarner   
Tuesday, 02 June 2009


In the first tip in this series, I warned that if you want to build your own site the right way, you will need to invest some time to learn proper techniques.  In this second part, I'll show you where you can begin your instruction. Take a little time to learn the languages of the web.  I'm talking about HTML, XHTML, and CSS.  Don't worry, learning these is not very hard.   HTML and XHTML are very similar to each other, and CSS is fairly simple as well.

What is (X)HTML?


Never mind that HTML is an abbreviation for hypertext markup language, or that XHTML stands for extensible hypertext markup language.  Just know that XHTML was meant to replace HTML, and that XHTML's syntax is more strict, which helps with cross-browser support (or at least it's supposed to).

If you've never seen any HTML, take a peek now with your browser.  Under your browser's "view" menu is an option to "view source" or "view page source."  Select that option and you will see the XHTML that comprises this web page.  This is what we call "source code."  It may look cryptic at first, but take note that everything is made up of English text characters.

What you may not see are the Cascading Style Sheets (CSS).  The CSS files are often stored in separate files, but they can be embedded directly into an HTML file.  As the name implies, the CSS files hold styling information.

A good place to learn about basic (X)HTML and CSS is at the W3C schools website.  The W3C (World Wide Web Consortium) sets the web standards and their website is the perfect place to get your feet wet.  Bookmark their page and return to it often—it is chock full of valuable information, including a great page for beginners .  Another good website is HTML Dog .  

If studying on the computer is not your thing, there are many good books available as well.  I recommend that you pick one that covers both XHTML and CSS.  Don't worry about getting the latest book—the current standards haven't changed much in a while.  Don't worry if the book doesn't cover version 3 of CSS—it hasn't been widely implemented yet—you are safe to stick with CSS 2.  Computer books can be expensive, so if you don't feel like spending the money, your local library should have at least a few good books on hand.

Keep XHTML and CSS separate


Before you start building your site, you need to understand the concept of separation of content and presentation.  The (X)HTML files contain your site's content and document structure, but the CSS holds information about how your site will actually look when viewed in the browser.  In other words, CSS should be used to control your site's colors, fonts, background images, and layout.  This concept is something that even professionals fail to grasp, especially when they use a WYSIWYG editor to build the site.

This is an important concept for several reasons.  First, the browser will render your site faster if you make proper use of style sheets.  Second, you site will be more accessible.  Third, you site will be much easier to maintain.  See Wikipedia's Style Sheet page for a run-down on the benefits of proper use of style sheets.

Don't worry about becoming an expert in HTML or CSS, that is not necessary.  Just learn enough so that you can look up the specific syntax when necessary.  The W3C site is handy for that purpose.  Another handy tool at W3C is the HTML and CSS validators.  They will parse your source code and let you know when you have a syntax error.  Use the validator early, and use it often.  Many rendering problems can be solved by fixing the code's syntax.

Summary


  • Learn XHTML or CSS, on the web or with a book, or both.
  • You don't need to be an expert to build your own site
  • Understand the importance of separation of content and presentation and put it in practice
  • Use the W3C site, especially the validators
  • Remember to have fun
Last Updated ( Tuesday, 02 June 2009 )
 
< Prev   Next >
Joomla Templates by Joomlashack
© 2008 Christopher Bumgarner. All rights reserved.