Tryangled Solutions web designing tips tricks

When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors.

Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names. If for some reason you do use mixed case, make doubly sure to match the case in your CSS with that in the markup.

The <span> and <div> tags are very useful when dealing with Cascading Style Sheets. People tend to use the two tags in a similar fashion, but they serve different purposes.
<div>

The <div> tag defines logical divisions (defined) in your Web page. It acts a lot like a paragraph tag, but it divides the page up into larger sections.

<div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text.

But that’s not all it does! The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.

One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can’t have a <div> inside a paragraph.

The primary attributes of the <div> tag are:

* style
* class
* id

Even if you don’t use style sheets or DHTML, you should get into the habit of using the <div> tag. This will give you more flexibility when more XML parsers become available. Also, you can use the id and name attributes to name your sections so that your Web pages are well formed (always use the name attribute with the id attribute and give them the same contents).

Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using

<div style=”text-align: center;”>

to center the content inside your div.

More About the <div> Tag
<span>

The <span> tag has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won’t change the enclosed items at all.

The primary difference between the <span> and <div> tags is that <span> doesn’t do any formatting of it’s own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>.

The <span> tag has no required attributes, but the three that are the most useful are:

* style
* class
* id

Use <span> when you want to change the style of elements without placing them in a new block-level element in the document. For example, if you had a Level 3 Heading (<h3>) that you wanted the second word to be red, you could surround that word with

<span style=”color : #f00;”>2ndWord</span>

and it would still be a part of the <h3> tag, just red.

1.  w3Schools.com - I’m still shocked on a daily basis by the number of people that don’t know what the w3 is or have ever heard of w3schools.com. The w3 is basically the governing body of web standards. They are the people that define what is XHTML and CSS. Now, what is w3Schools? It’s free, complete documentation for all things web. If you don’t know your <pre> from your <ol>, this is the place to go. If you still rely on dreamweaver to sort out your <div>s or, heaven forbid, you still code with tables, the w3schools is a great place to start learnin’ yo self some real code. It takes a second to get past the design (it’s aweful, ironically), but there’s a metric ton of good information there.
2. Apache - Oh Wait, it’s already there. Just click that “Personal Web Sharing” check box in your Sharing system preferences and you have everything you need to build a basic static HTML site. I get all my software updates from entropy.ch and there are a hundred good tutorials out there for installing PHP, Ruby On Rails, django, or whatever software you plan to use.
3. subversion - Subversion is amazing, to say the least. Once you go “version control system” you can’t go back. Basically, subversion is a way to keep all of your sites (or your blog theme, etc) backed up and versioned. You install subversion server on your computer or a remote server, and then check in your site to the server. Then you can checkout your site to your webserver and always have an updatedable, but also revertable site. If you break your design, roll it back to the last time you checked it in. Want to move webhosts? It’s as easy as 1 command. And want to update your site to that new design you’ve been working on, “svn up” and your good-to-go. For a great tutorial on installing subversion, check out this great tutorial from Hivelogic.
4. Textmate - Put down Dreamweaver and step away from the handholding. Seriously people, it’s really not that hard, and you’ll make so much nicer sites because of it. Textmate is a god send for web site designers. Yes, you’ll have to code by hand, but you can also post to your blog, get live updating previews of your code, and use the aforementioned subvesrion, straight from inside Textmate. And, with code competion and bundles, a well experienced ‘mater can type 2 or 3 characters and complete entire lines of code.
5. Firefox - Ok, this one seems like low-hanging fruit, but if you add Firebug, Web Developer, and Colorzilla to Firefox 2, you have one sweet testing/debuging environment. Firebug is like sending Firefox to medical school, seriously slice and dice capabilities. Web Developer extesion is like buying one of those nice big red Snap On tool chests full of tools, and shoe horning it into your browser and Colorzilla is just that, a color picker as powerful as Godzilla. I can’t imagine doing webdesign with out these great little pieces of kit.
6. Safari from O’Reilly Publishing - Safari from O’Reilly is amazing, that’s about all I can say. If you can’t tell, I’m big on documentation, and Safari is like having a bookstore in your computer. You can search through hundreads of REALLY REALLY great books (sorry about the caps, Safari gets me hot). My favorites on there are Bulletproof Web Design, The Zen of CSS, and Eric Meyer on CSS.
7. BONUS - Here’s all the other mac only software that I use and abuse that is worth a mention: xScope, CSSEdit, Transmit, Linotype FontExplorer X, Xyle Scope.

This is the second part of the essential SEO tips for WordPress blogs covering the topics of Google Sitemaps plugins, pings and ping servers, valid (X)HTML, importance of a layout that puts post content ahead of sidebars and navigation, and displaying post excerpts and teaser text on the home page.