Search Altered Pixels.net::

HTML Articles ::

Categorized List of HTML Articles
  • Creating Triangles in CSS

    Posted on :: Mar 9

    I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web so I thought I would describe it here.

    [Read more →]

  • HTML 4 and XHTML 1 to HTML 5

    Posted on :: Feb 20

    HTML5 has several new block-level sectioning elements that we can use to give relevant parts of web pages more semantic meaning. These new elements are for ‘chunks of related content’—basically a logical section of the document:

    [Read more →]

  • 7 reasons why you really should learn jQuery

    Posted on :: Dec 16

    In the last 2 or 3 years, we have all experienced the comeback of javascript. A language cursed in many ways, for its lack of consistency across browsers, slow runtime performance and poor tooling (debugging). The revival of Javascript is hard to miss though, given the jungle of frameworks and effects libraries that are becoming available. Even browser manufacturers are jumping on this trend by delivering javascript engines that dramatically speed up javascript execution. Javascript "2.0" seems to be the fuel for the next generation of web applications. 

    For long I have more or less ignored this whole trend. Most developers have enough new things to learn already, and javascript is often not the top priority. The fact that there are a lot of different frameworks (MooTools, Dojo, Prototype, jQuery, etc) does not make it any easier either.

    Below are my 7 reasons why you should learn a javascript framework, and that the best one to learn about is jQuery.

    [Read more →]

  • HTML 5 Event Attributes

    Posted on :: Dec 15

    Standard Event Attributes

    HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.

    Below are the standard event attributes that can be inserted into HTML 5 elements to define event actions.

    New : New event attributes in HTML 5.

    [Read more →]

  • HTML 5 : Tag Reference

    Posted on :: Dec 15

    HTML 5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.

    Some of the new features in HTML 5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML 5 also contains new elements like <nav>, <header>, <footer>, and <figure>.

    The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.

    Note: HTML 5 is not a W3C recommendation yet!

    [Read more →]

  • HTML 5 : The web is evolving

    Posted on :: Dec 15

    The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.

    To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.

    Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.

    Note that the specification is still a work in progress and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.

    [Read more →]

  • iPhone compatible multi-column CSS liquid layouts

    Posted on :: Dec 11

    I've put together a series of website layouts that use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless! Follow the links below for the demos and more detailed info:

     

    [Read more →]

  • Detecting Mobile Browsers

    Posted on :: Nov 30

    It's becoming more and more common that Users are accessing your website from a mobile web browser (like that from an IPhone, Blackberry, Android or other mobile device). It's also becoming more prevelant that you need to start supporting and developing for the mobile platforms. But how would you begin?

    [Read more →]

  • Conditional Comments :: What they are & how to use them

    Posted on :: Nov 24

    One of the most common operations performed in a Web page is to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser is compatible and renders correctly. The browser type can be detected using many different techniques. Most methods of browser detection make use of script on the server or client.

    This article introduces conditional comments, which offer certain advantages over scripted browser detection techniques.

    [Read more →]

  • Using JQUERY to Detect an End of Session event

    Posted on :: Nov 13

    With AJAX applications giving us a lot more power than an "old school" web 1.0 page, it isn't unusual for someone to just sit on one page and fire off various operations that use HTTP to fetch and present data. This works fine until you leave the site alone for too long and your session times out. (I'm assuming most folks use a time based session, much like how ColdFusion works.) The question is - what happens in your current AJAX based application when a user's session times out?

    There is a solution...

    [Read more →]

  • A CSS / JQuery Framework you can use...

    Posted on :: Nov 3

    Better quality and coherence coding inside a front-end team
    Preset CSS classes, know where your going with highly reusable classes
    A collection of some of the best jquery scripts
    A solid cross browser compatible stylesheet

    A new project means getting JS plug-ins together, clean a CSS and restart. This framework is intended to be your project starter, and in most case, you can jump in the project right away with a solid css foundation. This is not really a CSS “framework” but more a website starter kit.

    The framework is based on a 960px grid, but is very easy to manipulate to get the grid you want. It is however not intended to be used as a liquid grid.

     

    This is a CSS/Jquery Framework you can use and build upon.

    [Read more →]

  • Setting Form EncType Dynamically in Internet Explorer

    Posted on :: Oct 9

    In FireFox, you can dynamically set the EncType of a form element to be "multipart/form-data" for file uploads; however, this does not work in Internet Explorer (IE). Apparently in IE, you have to set the "encoding" of the form rather than the "enctype". The good news is, you can set both values without concern and this will take care of the problem:

    [Read more →]

  • Video Optimization?

    Posted on :: Sep 18

    If you're creating videos, hosting them on your website, and aim to optimize those videos for competitive search engine placement you'll want to pay attention to this one.

    Google has advised that to maximize the chances they find the right markup on your video pages, you should check to ensure it appears in the HTML without the execution of JavaScript or Flash.

    [Read more →]

  • IPhone Development Tips

    Posted on :: Sep 16

    I've spent the last few days or so or so doing iPhone web development, and I wanted to look into what - if any - tweaks were available to on the iPhone web browser. I've found two things that I think are pretty interesting.

    The first and simplest tip is working with the view port. (You may need to register at Apple in order to view that link. Two points off to Apple to requiring a login for simple docs!) The view port is a simple meta tag. Here is an example:

    [Read more →]

  • Designing Websites for Mobile Phones

    Posted on :: Sep 9

    Mobile web design seems to be something that most developers are avoiding. I have worked on a couple mobile websites, during this process, I have made some discoveries which I thought I would detail to help out others who may be jumping into mobile web design in 2009.

    [Read more →]

  • Mobile Websites for the Real World

    Posted on :: Sep 9

    Mobile development is less about the device and more about you. Your desktop PC, while relatively compact, is not really mobile. Your laptop, while mobile relative to a desktop, retains the same basic physical requirements as a desktop: horizontal surface, room for keyboard and screen, the use of two hands, etc. Your mobile device, however, represents a singularity in the evolution of portable personal computing. You are no longer restricted to a limited set of movements and positions - not to mention the use of two hands - in order to interact with your device. In essence, the truly mobile device is an extension of you and not visa-versa.

    What is the mobile web?

    [Read more →]

  • Google's PageRank Explained

    Posted on :: Aug 31

    PageRank is a numeric value that represents how important a page is on the web. Google figures that when one page links to another page, it is effectively casting a vote for the other page. The more votes that are cast for a page, the more important the page must be. Also, the importance of the page that is casting the vote determines how important the vote itself is. Google calculates a page's importance from the votes cast for it. How important each vote is is taken into account when a page's PageRank is calculated.
    PageRank is Google's way of deciding a page's importance. It matters because it is one of the factors that determines a page's ranking in the search results. It isn't the only factor that Google uses to rank pages, but it is an important one.

    From here on in, we'll occasionally refer to PageRank as "PR".

    You also have to understand, not all links are counted by Google. For instance, they filter out links from known link farms. Some links can cause a site to be penalized by Google. They rightly figure that webmasters cannot control which sites link to their sites, but they can control which sites they link out to. For this reason, links into a site cannot harm the site, but links from a site can be harmful if they link to penalized sites. So be careful which sites you link to. If a site has PR0, it is usually a penalty, and it would be unwise to link to it.

    [Read more →]

  • How Google Sitelinks are Created and Managed...

    Posted on :: Aug 31

    Google shows sitelinks for results when we think they'll be useful to the user. If the structure of your site doesn't allow thier algorithms to find good sitelinks, or they don't think that the sitelinks for your site are relevant for the user's query, they won't show them.

    At the moment, sitelinks are completely automated. They're working to improve thier sitelinks algorithms, and they may incorporate webmaster input in the future.

    [Read more →]

  • AJAX Development Gotchas

    Posted on :: May 1

    This Article goes over some of the Quirks and Browser behaviors and quirks you hsould be aware of when developing AJAX Applications. We'll be covering browser quirks, limitations and bugs you should watch out for.

    Cats peterbald

    [Read more →]

  • Converting Tables to a CSS Div Tag and XHTML validated layout

    Posted on :: Apr 30

    This is one very long tutorial/article. I know that many web designers, particularly those who adore table-based layouts will find this articles/tutorial especially helpful. I will be teaching you how to take your current website/layout created with tables, tear it apart, and put it back together using valid XHTML and CSS.

    Here’s a bit of an overview of what we’re about to do:
    a: Replace all tables with div’s
    b: Remove any broken, or old invalid code.
    c: Edit remaining code so it fits XHTML transitional standards.
    d: Write a CSS file to style the new layout.

    [Read more →]

  • CSS MouseOver Effects

    Posted on :: Apr 30

    In this CSS Tutorial, I'm goin to show you that making a Mouse Effect, doesn't always need to use JavaScript.

    Infact, the same overall effect can be achieved with the use of some CSS. This sample will be using 3 overall images: One for the regular state, one for the mouse over state and one for the clicked state.

    [Read more →]

  • Why not tables? Is CSS really better?

    Posted on :: Apr 30

    A lengthy discussion on the ultimate value of pure CSS (Cascading Style Sheets) based layout over the use of tables has been taking place. Sometimes, living in the sheltered world of accessible and standards-based design, I can lose touch with the fact that many people out there simply don’t accept some of the same guidelines I work with every day?—?- and that this does not, in any way, mean that they haven’t given the subject a fair shot. Very good arguments have been made to defend each side.

    On the whole, I think this discussion is an old, worn-out subject: those who won’t use tables generally don’t use them out of principle, and those who do use them out of pragmatism and a justified awareness that principles don’t build websites. I want to review the question once more, however, ignoring the entire question of principle.

    [Read more →]

  • Reasons Why CSS Is Superior to Tables in Website Design

    Posted on :: Apr 30

    Why is it that Cascading Style Sheets (CSS) are superior to table-based layouts when designing a website? Some web designers swear that table-based layouts are better than CSS-based layouts, while others believe that table-based layouts are ancient history and XHTML combined with CSS is the only real solution to coding a web site’s visual layout. Since we’re one of those CSS die-hards, we’ve compiled a list of 13 reasons why CSS-based layouts are superior to table-based layouts.

    [Read more →]

  • Uncovering Site Problems for Landing Page Optimization

    Posted on :: Apr 23

    Landing page optimization and testing can often produce double-digit conversion rate improvements and transform the economics of an online buisness. However, to get the best results from our landing pages, we must know where to begin.

    Often, I've been asked on both interviews and and from clients, "How do I get Ideas for what to improve or test?" I smile, and I Simply answer, "The answer lies in your own website, with the data you already have." I often get a "What are you tlaking about?" or a "Uh huh." stare from people.

    [Read more →]

  • IE 8: Is your site compatible?

    Posted on :: Jan 13

    Internet Explorer 8's release to manufacturing in March looking like a distinct possibility, are Web site developers and owners really ready for Microsoft's next browser? Thousands of sites still aren't compatible with IE 8 -- including Microsoft.com.

    [Read more →]

Recent Comments

  1. AL on "Chinese New Year in Kuala Lumpur"

    Hehe true, but there's more than one title in that...

Tag Cloud