April 1st, 2009
There are a lot of good sites out there that offer tips, tricks, and how-tos for the mid to advanced level coders and designers. However, I haven’t found many great resources for people looking to start out fresh, from the beginning. This means learning HTML, and then learning CSS (or learning them together). I find that a lot of people at this level are interested in learning how to use Dreamweaver, and are more interested in the WYSIWYG editor in Dreamweaver then learning how to code by hand.
There is no substitute for hand written code. Something created in Dreamweaver’s design view will never equal the well structured code that can be done with a text editor. It doesn’t matter if you’re on Windows or a Mac, in Textmate or Notepad++ or even Dreamweaver’s code view. What matters is you learn the language and best practices.
I’m experimenting with some screencasting software. Look for new tutorials for the beginner starting hopefully next week. If you’re beyond the beginner level, my apologies, but head over and check out Chris Coyier’s CSS tricks or net tuts. We’ll work up to those levels on this site, but for a while, we’re going back to the basics, and we’re going to do it using a hands-on approach with the aid of a screencast.
Tags: CSS, screencast
Posted in CSS | No Comments »
January 24th, 2009
This might be a bit basic for a lot of you, but it’s something a lot of people don’t really know about, and it kind of surprises me.
Do you know the difference between:
images/someimage.jpg
../images/someimage.jpg
/images/someimage.jpg
The first two are relative to the document, the last one is relative to the root directory. This is useful when you’re coding large sites with sub sections. Normally, for a five or six page site I’ll keep all my pages in my main directory, and then use an includes folder, a css folder, and an images folder. On larger sites, I’ll use more directories. So I may have ten or more folders, each containing up to ten or more files in it. If I need to get into that images folder, I have two options (3 if you use the full url). I can use ../images/someimage.jpg which means up one directory, then into the images folder or, I can use /images/someimage.jpg. Using the second method, it doesn’t matter what directory the page is in, it goes to the images folder from the site’s home directory.
Why is this important? Most times you don’t really move pages around, but in order to cut down on the amount of repeat coding, you do use includes. So, if I’m using an include for my navigation, the home page which is in the root directory is going to be at a different depth then a page in a subfolder. If I use site relevant paths for all my pages in the navigation that I’m including, then it won’t matter what depth the file is, or which directory it is placed in.
/about/index.php will take you into the about folder whether you’re at the home page, index.php, or if you’re in the about directory already at about/contact.php or in a different directory like work/print.php.
Tags: directory structure, paths
Posted in html | No Comments »
January 3rd, 2009
For all intensive purposes, XHTML is a more strict version of HTML with some of the benefits of XML. It’s goal is to be more cross-browser compatible. With that said, many of the websites I author, I still author in HTML, even though I follow 95% of the XHTML rules. Really, changing to XHTML would be pretty easy for me, because the only rule I don’t follow is I don’t close my tags that aren’t a pair. For example, I don’t close my break tags.
HTML
<br>
XHTML
<br />
For a valid XHTML document, all tags must be lowercase. I follow this already in my HTML.
Bad
<DIV ID=”sidebar”>
Good
<div id=”sidebar”>
All pages must have a valid doctype declared, which I do, I just declare HTML.
Strict declaration
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Transitional
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Frameset
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Attributes can’t be minimized in XHTML, and I don’t minimize them in HTML
Bad
<option value=”MO” selected>
Good
<option value=”MO” selected=”selected”>MO</option>
Also, all attributes must be in quotes.
Bad
<table width=90%>
Good
<table width=”90%”>
Instead of using name, XHTML uses id (also notice I closed the image tag with the /.
bad
<img src=”images/myimage.jpg” name=”mainimage” />
good
<img src=”images/myimage.jpg” id=”mainimage” />
As you can see XHTML is pretty easy, not too much different from our HTML we already write. For me the transition would just require a change of habit, and really just the addition of some closing “/”s and the changing of my doctype in my site template I always start with. If it means easier compatibility then I might as well start using XHTML now.
Tags: html, xhtml
Posted in html, xhtml | 2 Comments »
