webdesign2

toc When entering the web market it’s important to at least have a basic understanding of HTML. There are so many rules though so where do you start? This article will attempt to put these rules into light.

=The Rules= > >> >>>
 * ==Always have an html, head, title, and body tag.==
 * **Why should I do this?**
 * This is probably the cardinal rule of webpage design. This is because these tags are essential to building a proper webpage. Think of it like a recipe of sorts. You can’t make spaghetti and meatballs without the pasta, the sauce and the meatballs. Take out the pasta and you don’t have spaghetti, you have sauce, meatballs and a confused person. The confused person in this case will be your browser thinking “what’s going on?”.
 * It’s an essential rule. If you use programs like Dreamweaver and GoLive then they already take care of it for you adding them as part of the default structure of the page.
 * **What if I don’t?**
 * Most browsers know how to compensate if any of these tags are missing. They will simply render the page as they see it at face value though there is no guarantee that your page will turn out like you want it for 100% of your audience.
 * Always close the tags in the correct order you opened them.
 * **Why should I do this?**
 * This rule really only comes into play in the xHTML DOCTYPES. It’s there because the browsers treat your webpage as an XML document. For the sake of simplicity and easy interpretation of the code on behalf of both the user and the computer XML formatting MUST be well-formed. This means every tag opened must be closed in the correct order.
 * Even if you don’t use xHTML it’s still good practice and a good habit to get into. Browsers can interpret your code faster if it’s well formed. In addition to that others who read your code can interpret it faster and learn from it.
 * This should also note that most consider it better practice to always close your tags in general. While earlier DOCTYPES like HTML 4.1 allow for authors use single tag, it makes the transition to other DOCTYPES easier on you if you ever choose to.
 * **What if I don’t?**
 * This only effects your website if you’re using an xHTML DOCTYPE. If you’re using an HTML DOCTYPE nothing will happen.
 * If you indeed are using an XHTML DOCTYPE your page won’t render properly and the browser will show an ugly error shouting at you words like “malformed” and “improper”. However if it does do that you’ll know how to fix it.
 * **Examples**
 * BOLD-TALICS - Right!
 * BOLD-TALICS - Wrong

> >> >>>
 * ==Be sure to declare a DOCTYPE.==
 * **Huh?**
 * Basically what DOCTYPES do is tell the browser what kind of page it’s going to open up and what audience the page is trying to publish itself to.
 * Most DOCTYPES come in three flavors: Transitional, Strict and Frameset.
 * Transitional DOCTYPES are meant as a segue from earlier DOCTYPES to newer ones. They tell the browser that your coding style will most likely be a mix of the styles found in the earlier DOCTYPES but you’ll be incorporating the newer style as well.
 * Strict DOCTYPES will only recognize the coding styles associated with. What is meant by this is that if you’re working with an XHTML strict DOCTYPE then you can not incorporate any HTML DOCTYPE coding styles such as  or and unclosed tags as mentioned above.
 * Frameset DOCTYPES are meant to accommodate those users who work with frames and to ensure they are using it properly according to the DOCTYPE specifications.
 * You can also create your own custom DOCTYPES which is pretty wild. Firefox users can see how the developers did it by going to “about:mozilla” then viewing the source and going to the .dtd link at the top of the page.
 * **Why should I do this?**
 * Ok so this isn’t of extreme importance if you are just starting out in web design..
 * Each DOCTYPE varies and why you should pick it is completely up to you. It all really has to do with your audience. In terms of the audience HTML DOCTYPES are specifically for computer users. XHTML DOCTYPES were designed to accommodate computer-based users as well as mobile browsers and other audiences outside the normal scope.
 * **What if I don’t?**
 * If you don’t declare a DOCTYPE your browser will just default to Quirksmode.
 * Quirksmode is the most accommodating interpretation of your code to the browser. Some have described quirksmode as “the browsers’ assumption that you don’t know what you’re doing”.
 * Each browsers interpretation through quirksmode is different. While for the most part your page in Firefox will look the same as your page in IE you may notice slight aesthetic variations.
 * **Example**
 * <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

> >> >>>
 * ==Don’t use depreciated tags.==
 * **Why should you do this?**
 * Well, in earlier DOCTYPES this rule isn’t necessary. HTML 4.1 allows for the use of these tags however as Internet technologies progress it’s important not to fall too far behind using dated coding styles.
 * Depreciated tags are tags that have gone “out of style”. They are no longer needed as there are better and faster ways to get the same results. You don’t wear white after Labour Day so don’t use depreciated tags. It’s as large a faux pas.
 * Tags like the FONT tag and the CENTER tag have been deemed depreciated to encourage the separation of aesthetics and structure in an author’s markup. Programs like GoLive and Dreamweaver have already taken this into consideration so if you use them, you probably would have to go out of your way to incorporate these tags into your markup.
 * This method also accommodates other browsers that have opted not to use style sheets like those for the visually impaired or search engine spiders. The browser knows disregard loading the style sheet because it is of lesser importance.
 * **What happens if I don’t?**
 * Much like everything else covered in this article these tags will be rendered normally in your browser. With that being said however, your markup will still not validate in terms of your DOCTYPEs specifications if it is an XHTML DOCTYPE.
 * **What other ways are there?**
 * CSS is the proper way to add styling. As mentioned above style sheets were implemented in order to separate the aesthetics and the document structure. In a lot of cases CSS can cut down on the overall size of the webpage which equals less time for it to load, less bandwidth and so on.
 * **Example**
 *  body { font-size: 10pt }
 * Adding this inside your head tag will ensure that the document font size will be 10pt until specified otherwise.
 * Hello.

> >> > >> >>>  > >> >>> .sidebar { width:150px } > >> >>> .main { width:550px; float:right } > >> >>> .anchor { width:700px; clear:both } > >> >>> > >> >>> <!— In body Tag --> > >> >>> Main Content > >> >>> Side Bar > >> >>>  tags unless told not to. No, you’re not reading the markup backwards. The main body portion that goes on the right comes before the sidebar portion that goes on the left. > >> >>>
 * ==Use Divs rather than Tables for designing.==
 * **Why should I do this?**
 * It’s all about the purpose of the tag in the first place. Its purpose isn’t aesthetic and it has been argued to the point of exhaustion that it shouldn’t be used in this manner. tags were implemented for this aesthetic purpose.
 * In a lot of cases one would export their sliced up images from Photoshop to Dreamweaver and from there detail it further. Photoshop exports its visual structure using tables so I’m not going to hold it against you if you use Tables over DIVs.
 * The point where you should start considering this is when you’ve become comfortable working with HTML and CSS markups. This is because the benefits of using DIVs over Tables (aside from the purpose argument above) is the amount of code it takes as well as it helps keep the code readable in the more complex designs (tables in tables in tables isn’t the easiest to interpret).
 * **What happens if I don’t?**
 * Every browser has a different way of interpreting how tables should look like in terms of padding, spacing, margins and so on. While for the more straightforward designs will appear as they should, the more complex the design gets the higher the chance that your webpage can end up with small errors such as small white space gaps between images. There’s even the possibility of the page turning out completely wrong.
 * **Okay, so how would you design with DIVs?**
 * Designing with DIVs mimics the same concepts of the table only rather than straight through the markup you use CSS in conjunction with your markup. Here’s an example of how you would go about designing a two column page (one a sidebar, the other reserved for main content).
 * **Example:**
 * <!— In head Tag -->
 * Basically tags work like