HTML Articles ::
Categorized List of HTML ArticlesCreating 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.
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:
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.
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.
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!
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.
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:
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?
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.
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...
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 stylesheetA 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.
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:
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.
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:
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.
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?
Google's PageRank Explained
Posted on :: Aug 31
From here on in, we'll occasionally refer to PageRank as "PR".
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.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.
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.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.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.
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.
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.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.