HTML Articles ::
Articles pertaining to HTMLIE 7 and Google Maps :: A Quick Fix
Posted on :: Aug 3
I was fixing a Google Map at my job, when it was reported by one of our Clients, that the Google Map was 'Broken'. The client reported that the map was only half-displaying.
I opened up Safari, Firefox and Chrome and everything seemed to work fine. That’s when I realized I forgot to test the site in IE.
Apple-Specific Meta Tag Keys
Posted on :: Aug 2
This is a breakdown of some specific META TAGS that as developers we need to know about, that are targeted for Apple's Safari, IPhone, and I-Pad.
Finally, the End for IE 6
Posted on :: Jun 3
The most recent data from analytics firm StatCounter indicates that Internet Explorer 6, Microsoft’s outdated but resilient Web browser, may finally be on the way out.
HTML5 and Flash
Posted on :: Mar 27
Would you like to see Flash replaced by HTML?
HTML, SVG, CSS and JavaScript are very far along to replacing a lot of what I see Flash doing today - but it should be noted my browsing style is general usage, rather than gaming or interactive videos - which Flash is good at.I personally don't think HTML will replace Flash. I think HTML5 and the Open Web will replace Flash where Flash has been used as a stopgap. sIFR is used to bring "custom" fonts to the browser, but now we have really good support for native custom fonts via the CSS fonts module, and products like TypeKit and FontDeck are making it easy for web authors to include those custom fonts without the need of Flash.
3 Steps to Remove Pages and Cached Content from Google Search
Posted on :: Mar 13
Google’s indexing of websites for its search is quite good, quite fast, and quite thorough. There are times, however, that pages on a site should not be indexed. For example, admin sections or include files. Asking Google to remove content is easy and Google’s response is reasonably fast.
If you don’t own the website that has the material that needs to be removed, don’t bother reading any further. Contact the website responsible for posting it and ask them to remove it.
Cached content is handled through Webmaster Tools. To remove cached content all the steps below are required.
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:
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.
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.
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.
How to Mimic the iGoogle Interface
Posted on :: Oct 12
In this tutorial I'll be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!
This is a very long Tutorial. Includes source code download.Photoshop CS4:: Setting Photoshop to produce Div and CSS
Posted on :: Aug 19
Here is a very short tutorial on how you can set your photoshop to produce Divs and CSS rather than the old fashion tables. This is very useful becuase this is becoming the new way to work with web pages and lets you add a lot more room to do stuff that wouldnt be possible with non expandable tables.
In-context vs back-end authoring
Posted on :: Aug 18
Most modern content management systems provide two different ways of editing site content: in-context editing and back-end editing.
While in-context editing is often seen as ’sexier’, each method has its strengths and weaknesses. This briefing will explore these two editing options, providing advice on when to use them in practice.
What’s So Bad About CSS Frameworks?
Posted on :: Jun 2
CSS frameworks are by no means breaking news. There have been several to choose from for a good couple of years now, with one of the earliest and most well-known being Yahoo’s Grids CSS.What’s amazing to me is that many are failing to take advantage of these great little time-savers.
A quick stroll through any forums reveals plenty of people having the same frustrating, discouraging issues with floated layouts and positioning; I’m quite sure these could’ve been avoided if the developer had simply used tried and tested layout methods grabbed from a CSS framework.Hey, hold on — put those rotten tomatoes away! I’ll explain, I promise.
Heading Tags Explained
Posted on :: May 18
Heading tags are an integral part of SEO (search engine optimization).
5 Reasons to use css
Posted on :: May 18
Some useful and helpful reasons why to use CSS.
Text Sizng and Fluidity
Posted on :: May 18
Fluid and liquid layouts are definitely considered the ‘ideal’ design type right now, and I cannot agree more. I much prefer a fluid design over a set layout. For text we know that relative sizing (meaning the use of em, ex, and percentages) are preferred over the use of pixel sizing.
CSS Tips, Class or Div?
Posted on :: May 18
If your beggining CSS or even if you're not, this can be a bit challenging, and many a time i’ve heard people ask “But theres no difference, so which should I use ?”. In this short article I will explain the slight, but important, difference between the two.
The Web Site Development Process
Posted on :: May 12
Like the traditional software development, the process of web site development can also be divided into different life cycle steps. This can help to format the team effectively, and the standards and procedures can be adopted to achieve maximum quality. This article explains the steps of development which can be possibly arranged as a process of web engineering. This is just a guideline to help you, to know, how a process can be done. The steps may vary from application to application.
A system development process can follow a number of standard or company specific frameworks, methodologies, modeling tools and languages. Software development life cycle normally comes with some standards which can fulfill the needs of any development team. Like software, web sites can also be developed with certain methods with some changes and additions with the existing software development process. Let us see the steps involve in any web site development.
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.Converting PSD to XHTML
Posted on :: Apr 30
I’m going to show you the most practical tutorials on coding a template using CSS and XHTML. Making a template has two steps. The first step is Designing the template components and the second step is Coding them into a valid XHTML page.
What you will be doing in this tutorial is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in photoshop and coding it in dreamweaver. You can also access example code at various stages through the tutorial if you have any problems.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.
What is Web 2.0?
Posted on :: Apr 30
You’ve probably heard the phrase "Web 2.0". You may’ve even read some of the various definitions of it. And Web 2.0 does appear to mean different things to different people, so you would be forgiven for still feeling confused about the term.
AJAX Form Validation (AJAX Tutorial)
Posted on :: Apr 1
I got tired of Traditional Javascript based Form Validation, only because despite the fact they work well, they don't validate the content of the Feild Immediately. So I got tired of this, and built this off of the Prototype Framework.
The basic method is to attach to the form'sonsubmitevent, read out all the form elements' classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.Nice Form Fields (v2)
Posted on :: Apr 1
Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase, or signing up for a website. They are the basic, and pretty much the only way of gathering information on the web.
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!
Creating Dynamic PDF files using HTML and PHP
Posted on :: Feb 27
There always arise a need for converting content from one file format to another one. Some may need to convert some text into HTML and some may need to convert some HTML content to an image format. The main reason for the need to convert from one file format to another is because the target file format is best suited for targeted medium where the content need to be displayed. The targeted medium may be an email, a printed hard copy or a web browser. The text format is best suited for sending emails, as the possibility of the email contents getting corrupted in the transition is much lesser, when compared to the HTML formatted emails. PDF document or a word document would be the best choice for taking a printed hard copy and obviously HTML is best for showing contents in web browsers.
Here, we are going to study on converting HTML 2 PDF using PHP. This article is not going to explain on the main logic of how to convert a HTML file to PDF file. That would be a separate subject and it could not be covered in this short article. But we would be seeing how to use some free open source PHP scripts to accomplish this file conversion.
The Button Element
Posted on :: Jan 13
Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.
AJAX Form Validation
Posted on :: Jan 13
In this tutorial I decided to beef up my form validation routine. Don't get me wrong, I love JavaScript Form Validations, but have found in he past that they can be at times over come or bypassed all together.
With this minor inconvience in mind, I started Experimenting with an AJAX version (using prototype and scriptaculous), that will validate your Form's input directly on the page.
Below is what I've put together.