HTML Tutorials ::
HTML TutorialsApple-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.
Rounded Corners and Drop Shadows :: CSS Tutorial
Posted on :: Aug 2
In this new tutorial, I'm going to show you how to make rounded boxes, with a drop shadow all with CSS and no images. The Examples below are 100% CSS and compatible with FireFox 3.6, IE 7 & 8, Chrome & Safari.
Using jQuery Autocomplete to Populate Another Autocomplete
Posted on :: Jun 8
This example will use a jquery autocomplete to choose a state then, based on the state, another jquery autocomplete will be populated with zip codes for that state. Basically, the state chosen gets used as a filter in the query for the second autocomplete. I've included example for this tutorial in .NET, ColdFusion and PHP to show just how easy it is and compare the differences between the languages, asnd uses SQL Server for it's Database...
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:
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.
Nice & Clean Sliding Login Panel built with jQuery
Posted on :: Jun 10
A while ago, I created a Slidedown Panel similiar to that on Dynaic Drive (though the script there isn't mine). Well I've re-tooled it to work with JQuery, and have included it in this here tutorial.
What's the scope of this tutorial?
- Panel has been redesigned to be “slicker”.
- Panel overlaps content instead of “pushing” it.
- Images are transparent… and work in IE6! (Thanks to 24Ways for their IE PNG Fix.) This means, you can change the background color of the body as you wish or even set a background image.
- Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images
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.Using JavaScript to access an HTML element with multiple class names
Posted on :: Apr 23
Occasionally I discover a nifty solution to a coding obstacle. Although seemingly small, these can be major productivity barriers, especially if you are only a recreational coder. The following is in response to an HTML element that has multiple class names declared.
Our HTML looks something like this:
Create Dynamic Form Fields
Posted on :: Apr 23
Cascading Style Sheets (CSS) specifications combined with JavaScript events give you a great opportunity to create forms that look good and are easy to understand. Instead of boring, black and white forms, you can create forms that respond instantly to user inputs.
Creating Dynamic Effects
Some visitors may have problems navigating through a long or complex form. Help them out by creating form fields that change color as the visitor navigates through the form.(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.
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!
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).
Uploading Files Like GMail Attachments
Posted on :: Mar 13
Asynchronous file uploads is quote popular feature in modern AJAX web-applications. However standard AJAX classes (XmlHttpRequest) does not have capabilities to process or send files selected with "file dialog" (input type="file"). This article contains example application (trivial file-sharing service, like rapidshare, megaupload or yousendit) which uses embedded frames (IFRAME) to upload file. While file is uploaded to hidden frame, user can still access web-page and fill "file description" field.
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.
Dynamically Generating HTML Table Columns & Rows
Posted on :: Feb 12
I've written this tutorial, because I had a need to do exactly what the title suggests. I needed to dynamically generate a table with Columns and Rows, based off of a CFQUERY results. Well, this is the fruit of my labors, and I hope it assists others as well.
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).
Pure CSS Rounded Boxes
Posted on :: Jan 13
There are a ton of posts, tutorials and wizards on the net claiming "Pure CSS Rounded boxes". the one issue with all of those posts, totorials and wizards is they also use images.
My version of Pure CSS Rounded Boxes doesn't use images at all, it is truelly 100% All HTML and CSS.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.