Apramana

Beyond Dimensions

Archive for the ‘XHTML’ Category


Web Safe Fonts

Dec 7, 2008 Author: Chamara | Filed under: CSS, Web, XHTML

When using fonts on websites, font should display it’s all properties & styles on all or most web browsers which runs on different platforms like Windows, Mac or Linux. Unfortunately we don’t have much fonts which supported on all web browsers & platforms. So fonts which are working on all or most web browsers are called Web Safe Fonts.

So here are list of web safe fonts which I am using in my web design projects.

Arial

Arial
Arial
CSS code;

font-family:"Arial", Helvetica, sans-serif;

Georgia

Georgia
Georgia
CSS code;

font-family:"Georgia", serif;

Courier New

Courier New
Courier New
CSS code;

font-family:"Courier New", Courier, monospace;

Trebuchet MS

Trebuchet MS
Trebuchet MS
CSS code;

font-family:"Trebuchet MS", Helvetica, sans-seri;

Lucida Console

Lucida Console
Lucida Console
CSS code;

font-family:"Lucida Console", Monaco, monospace;

Verdana

Verdana
Verdana
CSS code;

font-family:"Verdana", Geneva, sans-serif;

Times New Roman

Times New Roman
Times New Roman
CSS code;

font-family:"Times New Roman", Times, serif;

Lucida Sans Unicode

Lucida Sans Unicode
Lucida Sans Unicode
CSS code;

font-family:"Lucida Sans Unicode", Lucida Grande, sans-serif;

Tahoma

Tahoma
Tahoma
CSS code;

font-family:"Tahoma", Geneva, sans-serif;

  • 1 Comment

    • Speed up your web pages with YSlow

    Jul 26, 2007 Author: Chamara | Filed under: CSS, Web, XHTML

    Yahoo Developer Network launches YSlow, a web page analyzer which tells you why they’re slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. So before installing YSlow you have to install Firebug.

    YSlow featured with:

    • Performance report card
    • HTTP/HTML summary
    • List of components in the page
    • Tools including JSLint

    Get YSlow »

  • Comments Off

    • Writing Valid (X)HTML

    Jul 23, 2007 Author: Chamara | Filed under: CSS, Entertainment, Events, Personal, Technology, Tutorials, Tweets, Web, Web Standards, XHTML

    Introduction

    The implementation of valid/standard methods, guidelines and best practices will help to produce high quality websites that are accessible to as many as possible. By building valid websites you can save time and money for the development and provides a better experience for the visitor.

    Validation is also an important part of web development. Many errors that are hard to find can discover during validation. This is like spell checking and proofreading for grammar and syntax in a document. but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language. You can validate your (X)HTML page as well as your CSS.

    Here I’m not going brief you about Web Standards, but I’m going to tell how we can use those best practices in Web standards to produce a valid (X)HTML page.

    Benefits of having a valid code

    • Future compatibility: Your website will compatible with future web browsers.
    • Simpler development and maintenance: Creating Valid (X)HTML Documents Means Cleaner Code and Easier Maintenance.
    • Faster download and rendering of web pages: Less (X)HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode.
    • Better accessibility: Semantic (X)HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
    • Better search engine rankings: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings.
    • Simpler adaptation to any media or screen devices: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.

    Best Practices…

    • Include the correct DOCTYPE declaration at the beginning of the file. A DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
    • The DOCTYPE is case-sensitive so use the correct case:
      <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
    • Add the attribute xmlns="http://www.w3.org/1999/xhtml" to the <html> element.
    • Close all elements: Omitting </p> is not valid anymore.
    • Change all elements to lowercase: <P> becomes <p>.
    • Correctly specify empty elements: <hr> becomes <hr />.
    • Quote all attribute values: <p align="right">.
    • Always add attribute values: <hr noshade="noshade" />.
    • Always use &amp; in place of &. : <a href="foo.php?chapter=1&amp;section=2 />
    • <form> element should have to have a action attribute always: <form action="#"
    • If you are using name & id attributes in input element, both should be in same name: <input name="field_name" id="field_name" />
    • Use alt attribute always for <img> element: <img src="image.gif" alt="" />
    • Use width & height attributes as in this order in <img> element: <img src="image.gif" width="100" height="100" alt="" />
    • Use a separate JavaScript file always & make sure you have put type attribute correctly: <script type="text/javascript" src="javascript.js"></script>
    • Try to use a external CSS file for styles.
    • Always try to use tables only for TABULAR data.
    • Make sure you are using <th> for table headers & <td> for table data.
    • Elements in (X)HTML must be closed in the reverse order that they were opened in: <strong><em>…</em></strong>

    (X)HTML Validation services

    CSS Validation services

    Accessibility Validation services

    Useful Firefox Add-ons for validation services and web development

  • 11 Comments

    • Feeds In My Google Reader

    Jul 16, 2007 Author: Chamara | Filed under: CSS, Design, Entertainment, Technology, Web, Web Standards, XHTML

    Here another list from me :) this time it’s all about feeds which I have added to my Google Reader to read whenever I am free. Actually now I am addicted to Google Reader and these feeds. This list is bit long and it’s containing around 78 valid feeds.

    Here I have sorted out the list in alphabetical order. This will contain feeds about Web Standards, Accessibility, Usability, User Experience, Web 2.0, Personal Blogs, Technical and Technology, Design Resources and some great online journals regarding web and it’s new trends. This is very helpful for me to keep my self updated on time.

    If anyone know any good feed that I have missed here, feel free to add it via a comment.

  • 9 Comments

    • Web Standards Round Up

    Jul 12, 2007 Author: Chamara | Filed under: CSS, Web Standards, XHTML

    Here I’m going to list down very useful articles regarding web standards. From introduction to implementation, from web browsers to web accessibility. These articles were very helpful for me, so I hope for all you people who have heard about Web Standards and want to learn more about it, people who haven’t even heard about Web Standards and also Web Standards geeks who have miss some articles can find here.

    If anyone think I have miss something here, please let me know then I can add it too.

    Let’s make a better web for you and for me :)

  • 2 Comments

    • FullCodePress | International site in a day competition

    May 17, 2007 Author: Chamara | Filed under: CSS, Design, Events, Web, Web Standards, XHTML

    FullCodePress is a series of web competitions – the brainchild of the people at Webstock and WIPA. In essence it’s a geek Olympics!

    The concept is simple. Web teams take each other on, at the same location, to build a complete website in 24 hours. No excuse, no extensions, no budget overruns.

    The first event will be held in Australia on Saturday 18 and Sunday 19 August 2007 between Australia and New Zealand. In 2008 there will be a worldwide challenge for any interested countries – to be held in Wellington New Zealand. We’ll also be facilitating and encouraging competitions within individual countries.

    Check out the FullCodePress website »

  • Comments Off

    • Browser specific CSS selectors

    May 11, 2007 Author: Chamara | Filed under: CSS, Tutorials, Web, Web Standards, XHTML

    Here i’m going to list some useful browser specific CSS selectors, known as browser specific hacks;

    IE 6 and below: * html {}

    IE 7 and below: *:first-child+html {} * html {}

    IE 7 only : *:first-child+html {}

    IE 7 and modern browsers only: html>body {}

    Modern browsers but NOT IE7: html>/**/body {}

    Opera 9 and below: html:first-child {}

    Safari: html[xmlns*=""] body:last-child {}

    Check this tutoaial to learn how to use CSS selectors »

  • 5 Comments

    • A List Apart – The Web Design Survey 2007

    Apr 24, 2007 Author: Chamara | Filed under: CSS, Design, Web, Web Standards, XHTML

    ALA hosting The Web Design Survey 2007

    Designers, developers, project managers. Writers and editors. Information architects and usability specialists. People who make websites have been at it for more than a dozen years, yet almost nothing is known, statistically, about our profession. Who are we? Where do we live? What are our titles, our skills, our educational backgrounds? Where and with whom do we work? What do we earn? What do we value?

    Read more about the web survey

    The Web Design Survey 2007

  • Comments Off

    • Categories

    Blogroll

    Sponsors

    Bring Down IE6





    Most Popular

    Recent Comments

    Latest Entries

    Copyright © 2007 - Apramana - is proudly powered by WordPress
    Gossip City Theme is created by: Design Disease brought to you by Celebrific.