In this blog post I will talk about how developers who are design challenged can improve their html and css authoring skills. I have been doing back end coding for a long long time. My UI design skill was very much limited to designing console based applications & they were completely devoid of any kind of html and/or css design. However, I knew little html back then especially some of the header, paragraph & form tags but I have rarely used them. Therefore, I decided to formally learn them. My notion of formal learning is mostly self learning from books & then solving some of the interesting exercise problems. I will explain in little more detail on what are some of the important concepts a newbie to web design should be aware of when learning html & css. Please check the recommended reading section for information on books that I used for learning html & css.
HTML - Hyper Text Markup Language
- HTML is NOT for styling
- One of the key points to keep in mind about html is the fact that it is just a markup for the content. In other words, it just provides context to the content & nothing more. More importantly html should never be used to change the appearance of the content. You will basically markup the headers, paragraphs and any other contents of interest using html & that is all. CSS on the other hand does the job of changing the content appearance. This is kind of confusing to grasp initially because HTML does have some obsolete attributes to change the style or appearance of the content as well. Also, browsers add to the confusion by automatically styling the content using its own default styles (when no CSS is provided) thereby giving the notion that HTML does content styling as well.
- Block Vs Inline
- The next key point in understanding html is the concept of inline vs block elements. Elements like paragraphs <p> and headers <h1..h6> are block level elements. These elements start off on a new line & have some space above & below them whereas elements like <em>, <strong> etc are all inline elements & they stay with the line of text. This knowledge is required to better understand CSS.
- HTML Forms - GET Vs Post
- HTML forms enable sites to collect information from users & submit them to server for processing. All registrations that you come across on web sites are all examples of html forms. Form information is sent to a web server for processing when the user hits the submit form button. Users coding the form will have defined very clearly what module within the web server will be processing the form information. There are two modes for sending form information to server that you can specify while authoring the form. One is the 'GET' method and the other one is the 'POST' method. 'GET' appends the form element data to the URL that loads the form processing module. On the other hand, 'POST' sends a separate http request with the form element data to the server for processing. In both cases, data is sent in clear text & is therefore not a recommended approach for transmitting sensitive information like passwords. You should use secure sockets (https) for sending sensitive information.
- Browser modes - Standard vs. Quirks
- All browsers support two types of HTML rendering modes. One is the quirks mode which is out there basically to support pages authored using older versions of HTML. Browsers will attempt to render old pages authored using non-standard html as best as it can under quirks mode. If you would like to author your HTML pages using the new version you should configure your page to use the standards mode. You do this by defining a DOCTYPE element at the top of your html page using the STRICT tag. However, be warned, there are still people using older version of browsers that does not understand any of the enhancements in the new version. Please refer to the sidebar DOCTYPE Declaration for the syntax & the W3C site for more information.
- HTML authoring tools
- I use Notepad++ for authoring html documents but there are other commercial WYSIWYG authoring tools.
CSS - Cascading Style Sheets
- Box Model
- Every html element is rendered as a box by the browser. Therefore, it is imperative to understand what each box constitutes. For instance, browser renders the following <h1>text</h1> element as a box with the content "text" surrounded by some padding space followed by border and then some margin. However, the default rendering by the browser does not display any border and padding but just the content and margin. Please refer to the sidebar CSS Box Model for more information.
- Div Vs Span
- Div and Span are html elements. They are generic elements that you could customize to fit your needs. If none of the standard html elements defines your content best, you may go with the div and span elements and give them a name of your own. Div is a block level element whereas span is inline. Div element has completely replaced table element for page layouts. Usage of table elements for page layout is old school, cumbersome and not maintenance friendly. Therefore, it is good to have a solid understanding of div & its usage to best author CSS.
- Classes Vs IDs
- You can group related styles together as classes or IDs. You may then refer to these class names or IDs in the HTML document. Please note that you can only reference an ID once where as you can reference a class multiple times in your document.
- Floats
- Floats are key when it comes to laying out the elements on a page. When a html element is floated either to the left or right, all the elements beneath it will move up to occupy the empty space. Say, you have a note section marked up using the div element followed by a paragraph of text. You can float the div element to the right & the paragraph below it will occupy the empty space left of the note section & the space below it. Floated element acts like an island and all the elements underneath it will surround it like a stream of water. I picked up this analogy from some book/web site & I don't recall the name or address of the source.
- Graphics
- Basic understanding of image creation & manipulation techniques is required for creating decent layouts and styles in CSS. Experience with a simple paint program may not be adequate. However, at the same time you do not need to have extensive experience with advanced image manipulation software's like Adobe photoshop. You will need to know at the least to create basic solid colored background images and then add transparency or gradients to them as needed. GIMP is free open source tool that lets you do anything from basics like paint to advanced like photoshop.
- Tools
- Again, all you need is a notepad for creating CSS documents. Apart from that you may also need the firebug and/or the web developer extensions for firefox. These extensions provide an easy way to validate your CSS and HTML for any errors & will also let you review the styles for any existing web pages.
- General Design Tips
- Providing sufficient padding & margin improves the design a lot.
- Always use an appropriate font with suitable size for the body text. It is customary to have a sans-serif font for title and a serif one for body text but again it is a matter of choice.
- Always choose colors that are pleasing to the eye. One option would be to choose colors that do not contrast too much.
