HTML Tutorials ::
Categorized List of HTML TutorialsCreating 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.
JQuery Tutorial :: Show/Hide Multple Divs with a Select Field
Posted on :: Mar 3
In this Tutorial, I'm going to show you how, with the use of JQuery, and a simple form, I was able to create a very nice and simple effect for hiding and showing a Div, based strictly off of a value selected in a form's select box.
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.
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:
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.
Should Designers & Developers be held liable for Internet Explorer Design Bugs?
Posted on :: Nov 23
This is a question I'm posing to the wild Development Community becasue it seems more and more prevelant that Designers and Developers alike are being held accountable for Bugs and lack-of-interoperability especially when designing an developing Websites that are Standards-Compliant and are 'Web 2.0' compatible.
Internet Explorer, and its inefficient JS engine, is off in its own little world and forces web developers, designers, and programmers to make special exceptions when it comes to CSS and JS. Although its improved a little with the advent of its latest 8 version IE is slowly falling behind and yet people continue to use it because it comes with Windows...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...
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.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:
CSS and Jquery - Creating an Image Slider
Posted on :: May 1
In this tutorial I am actually going to be explaining how to do something which I created for one of my other projects. Basically you are going to create a jquery effect. When a holder is hovered over the top image slides down to reveal the image underneath. I will also explain how to use position absolute to float an image in the top right to show the image is new.
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.Changing a Document's Text size with JavaScript
Posted on :: Apr 30
Sometimes the text size you've specified for your webpage isn't suitable to the viewer, depending on his browser configuration or OS. This useful script uses Dynamic CSS to let the viewer himself modify the text size of the page on demand, by clicking on an Increase or Decrease Font Size link. Now that's a kind of personalization your viewers may just appreciate!
Creating Expanding Images with JavaScript
Posted on :: Apr 30
We're going to make a simple script for folks who want to have an image expand onMouseover (to its actual size). This lets you display large images at a reduced size initially (aka thumbnail size), and have them dynamically expand when the mouse rolls over them. Installation is simple- install the script in the HEAD section of the page, then give your "thumbnail" images a CSS class of "
expand". These thumbnail images should have an explicit width/height attribute that's less than the actual image's dimensions, so the script has something to expand to.This Script is AJAX friendly, meaning imported content with images with the "
expand" class will be immediately recognized by the script.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.(x)html Compliant Dynamic Columns Display
Posted on :: Apr 23
There's always alot of methods for displaying a Table's rows and Columns, dynamically, however this tutorial will show yu how to do it with XHTML Complaince.
Uploading Files Like GMail Attachments
Posted on :: Mar 15
Ever wanted to upload files using AJAX like in GMAIL, without reloading the page? Now you can. Cross browser method to upload files using AJAX in only 1Kb of code, it is indeed similiar to my Previous Post Uploading Files Like Gmail Attachements in PHP except this version uses HTML & JavaScript and is not dependant upon a Server Side Language (however i imagine you could easily apply it to any language).
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.
Nice Form Fields V1
Posted on :: Jan 23
Well, I don't know about you guys, but I've gotten tired of the same old formfields in web-based forms. Yes While they do serve a good function (data input), I feel this is an occasion where function needs some form (pardon the pun).