The main purpose of this tutorial was initially to show how IE6 and Firefox differ but now shows differences between other browsers as well. View in IE, Firefox, Safari and Opera. IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
There are introductions to the more common uses of HTML and CSS coding as listed below. Some of the examples are provided just to show problems, others show solutions that work in Firefox, IE, Opera and Safari. Use the example that suits you.
There are always several ways to code and my examples may not suit your page if they conflict with other code in your page, so look at other tutorials in addition to mine. Remember that tutorials can often be out of date as well as offering alternative solutions.
There is a "tag-soup" XHTML syntax version of this website here but it is not a complete replication.
Index of Contents
Webpage coding generally; stylesheets, text, images, hyperlinks, etc.
Links to useful websites for codes, tutorials, validation and forums for help
Code for a basic HTML webpage and CSS Style Sheet
Div boxes - position absolute, relative and fixed
Basic two and three column layouts
Browser background display differences; full height, equal heights, etc.
Centering divs horizontally and vertically
Firefox / IE6 scrolling div display differences and overflow: hidden
Header and footer tied to top and bottom of screen
Maximum and minimum width for a whole webpage, image or text
One layer above another in position: relative or position: absolute
Scrolling divs, object tag and iFrame for lots of images in a row
Photo album examples and CSS slideshows
Links from various parts of an image
Lists; unordered, ordered, mixed and definition
Horizontal and vertical dropdown menus using list tags
Popup on hover link and larger image popup from icon
Tables using CSS codes
Forms for submission of data to email address or MySQL database
Framesets and iFrames for inserting other HTML pages
Sound and video
Changing color opacity; fixed and on mouseover
SSI and PHP enable standard sections of code to be inserted in many pages
Some typical Javascript applications
PHP introduction and forms to email and database
HTML 5 Features
CSS3 Features
.htaccess Files
CSS Media Queries; Responsive Layouts for mobile/smart phones and tablets
Scrollbar colors, 100% height for backgrounds, link colors, highlighted links, different buttons for visited and hover states, table cell color change on hover, animated gifs, favicons, rounded corners, search box, icon color change when scrolling, gradiated background images, border images or shadow images all round a div
Frequently Asked Questions
Two columns Ready-to-use layout;
fixed width and flexible height with header and footer
Two columns Ready-to-use layout;
flexible width and height with header and "sticky footer"
Three columns Ready-to-use layout;
flexible width and height with header and "sticky footer"
View/Source or View/Page Source in browser menu to see all html code.
These examples are for advice only. No liability can be accepted for any untoward consequences of using an example or advice on your web pages.
This website is deliberately simple in layout - even boring - so that viewers looking at the stylesheet or source code for an example are not confused by too many fancy tricks. A simple layout often has more clarity. Less is more.