Wickham's HTML & CSS tutorial

Search

Introduction to HTML & CSS

Cock Pheasant and link to Wickham

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
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
 
FAQ
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"
 

Notes

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.

© Wickham 2006 updated 2024   Wickham


top

Google
web www.wickham43.net/

Robin