Wickham's HTML & CSS tutorial

Sitemap | Home | Search

General Advice

 

Browsers

View examples in Firefox and IE to see the differences. The main purpose of this tutorial was initially to show how IE6 and Firefox differ because IE6 will still be used for some time but now shows differences between other browsers as well. IE7 is more like Firefox than IE6 but there are still some differences. Opera, Safari and Google Chrome generally process code in a similar way to Firefox. IE8 is much better than previous IE versions and substantially like Firefox. Google Chrome is based on the same WebKit engine as Safari. IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers.

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.

 

Doctypes

See w3.org for the schedule of Doctypes. It is recommended that you use the HTML 4.01 Strict Doctype where possible (or HTML5, see below). The XHTML 1.0 doctype is often used but see the comments in the next section "HTML or XHTML". The XHTML 1.1 DTD Doctype is not recommended where web pages are designed for the general public, some of whom will still be using old browsers which will not operate the XHTML 1.1 standards. The HTML 4.01 Frameset or the XHTML 1.0 Frameset Doctype must be used for framesets.

Browsers are often very accommodating of errors and you may find that although a validator has found an error or shown a warning your pages display well on all major browsers. However, if you cannot correct the errors or warnings it may be advisable to move down from HTML 4.01 Strict to HTML 4.01 Transitional to avoid them.

The HTML 4.01 Transitional DTD, "includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures" so this may be used if the Strict Doctype gives problems. It has been used on this site where an older element called "iframe" and an older attribute called "start" have been used and also where "name" instead of "id" has been used because a certain browser does not work with "id".

The Doctype should be inserted right at the top of the HTML file before the html and head tags:-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Remember that when a Doctype is included above the head before the html tag the overall width of a div is its defined width plus borders, margins and padding widths. Internet Explorer computes padding and borders inside the basic div width without a Doctype (known as quirks mode) and this method is now out of date.

Look at the following two pages to see the differences between using and not using a Doctype. Use IE6 or IE7 which both behave the same way. Firefox always displays padding and borders outside the div width whether or not there is a Doctype:-

IE with a Doctype. Look at item 6.
IE without a Doctype. This also shows how IE does not apply some styles without a Doctype.

HTML5 doctype

The doctype for the future HTML5 will be <!DOCTYPE html>. HTML5 still in draft form (HTML 4.01 is still the official current version) but many people are using it as future changes are likely to be trivial and older browsers will process all the HTML 4.01 codes, but not the HTML5 new features.

If you use any of the new HTML5 elements, like <header>, <video> or <canvas> remember that many browsers won't process the elements until updated.

See HTML 5 Differences.


HTML or XHTML coding

There are numerous articles discussing the merits of HTML or XHTML; see this Killersites thread which is old but still relevant. It's very technical but the gist is that HTML is recommended (the current HTML 4.01 or the draft HTML5) and that XHTML 1.0 will, in practice, only be to HTML standards (known as "tag soup" because it's a mixture of XHTML syntax markup and HTML processing) as stated in Wikipedia which used to say:- Use of XHTML syntax in a document which is served as HTML. Serving XHTML code to browsers and telling them it is HTML constitutes serving tag soup, because the browser has no choice but to interpret it as HTML-like markup with "syntax errors". This particular use of tag soup is recommended by Appendix C of the XHTML 1.0 specification as a way of serving XHTML to browsers that do not support it.. There is another comment by LSW on 16/02/08 here and posts by shelfimage and Zombie here. However, now there is HTML5 and XHTML5 (X/HTML5), see below.

The comment above and a lot of the comments below are now irrelevant as the way forward for normal websites is supposed to be X/HTML5 (see below). Wikipedia says However, in 2004, the Web Hypertext Application Technology Working Group (WHATWG) formed, independently of the W3C, to work on advancing ordinary HTML not based on XHTML. The WHATWG eventually began working on a standard that supported both XML and non-XML serializations, HTML5, in parallel to W3C standards such as XHTML 2. In 2007, the W3C's HTML working group voted to officially recognize HTML5 and work on it as the next-generated HTML standard. In 2009, the W3C allowed the XHTML 2 Working Group's charter to expire, acknowledging that HTML5 would be the sole next-generation HTML standard, including both XML and non-XML serializations. Of the two serializations, the W3C suggests that most authors use the HTML syntax, rather than the XHTML syntax. Some of the references to XHTML 1.0, XHTML 1.1 and XHTML 2.0 below are now largely irrelevant but useful if you want to code pure XHTML (not appropriate for a normal website).

Before 2007 many people thought that HTML was going to be superseded by XHTML and that one of the XHTML 1.0 doctypes was the appropriate doctype to use as a transition towards the true XHTML 1.1 and 2.0 standards later. Many professional websites use one of the XHTML 1.0 doctypes, including some of mine, but times have changed. It now seems that pure XHTML will be for specialist XML based languages like SVG and MathML and inappropriate for normal websites. HTML 5.0 is being developed and XHTML 2.0 was being developed alongside for XML coding. XHTML 1.1 and 2.0 will never be processed as XML by IE6 when used properly with content="application/xhtml+xml" (they will probably just process as HTML or not at all). Now wikipedia says In 2009, the W3C allowed the XHTML 2 Working Group's charter to expire, acknowledging that HTML5 would be the sole next-generation HTML standard, including both XML and non-XML serializations.

Item 1.6 HTML vs XHTML in the W3C HTML5 page says The first such concrete syntax is the HTML syntax. This is the format recommended for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an HTML document by Web browsers. This specification defines version 5 of the HTML syntax, known as "HTML5".
Then it says The second concrete syntax uses XML, and is known as "XHTML5". When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an "XHTML5" document. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the "HTML" syntax. which means that IE6 will have serious problems and the slightest coding error will cause display problems in any browser.
It seems that they want us to return to HTML in future, but right now anything using the doctype XHTML 1.0 will be OK and will always be OK provided the XHTML 1.0 doctype still exists, but new websites should move on to HTML5.

HTML5 is also referred to as X/HTML 5.0 (note the /) as it will process as HTML when combined with the meta tag including content="text/html; charset=utf-8" and process as pure XHTML when combined with the meta tag including content="application/xhtml+xml". Pure XHTML including content="application/xhtml+xml" or having <?xml version="1.0" encoding="UTF-8"?> above the doctype will be much stricter than X/HTML5. When properly processed by browsers capable of processing XHTML even the smallest coding error will cause the page to fail completely, so validation will be essential. X/HTML5 is an incremental step forward and is influenced by the current state of the art (web browser technology, etc.) and how markup is currently used (ie not perfectly coded in many cases, so it will still display, even with errors).

Even w3schools, which is considered the best tutorial, converted to XHTML 1.0 in 1999 and used these comments (since removed):- XHTML is the "new" HTML. The latest HTML recommendation is HTML 4.01. This is the last and final HTML version. HTML will be replaced by XHTML, which is a stricter and cleaner version of HTML. and W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by Hege Refsnes and Ståle Refsnes. but the comments were out of date now and the conversion premature.

However, many of us have already used XHTML 1.0 doctypes and it is timeconsuming to go back to HTML 4.01 syntax but it doesn't matter as XHTML 1.0 combined with text/html will be to HTML 4.01 standards. Coding element and attribute names in lower case is valid in HTML and XHTML but changing all the XHTML closing tags with /> back to just > for HTML is not worth the effort. There are other differences between HTML and XHTML which would have to be reversed.

So if you have not started coding, use one of the HTML 4.01 doctypes or the HTML 5 doctype, but if you have already used XHTML 1.0, don't worry.

Older browsers will not process pure XHTML. The doctypes need to be associated with the code application/xhtml+xml instead of text/html. Some newer validators raise a warning about a conflict between Mime Type and Document Type relating to the use of text/html rather than application/xhtml+xml for the media type when using the XHTML 1.1 doctype. This is only a warning and your page may be classed as valid in other respects; it is unlikely to result in your page displaying incorrectly but it is nevertheless incorrect. You will need to use text/html as IE6 and some other old browsers do not recognise application/xhtml+xml as a Mime type.

XHTML 1.0 was intended to be a transitional stage between HTML 4.01 when used with <meta http-equiv="content-type" content="text/html; charset=utf-8" /> (which is necessary for older browsers) and pure XHTML when used with <meta http-equiv="content-type" content="application/xhtml+xml" />. When using the XHTML 1.0 doctype with text/html the assumed Mime type of application/xhtml+xml has been contradicted by text/html. So why use XHTML 1.0 Doctypes if it is only HTML standards that are actually used by browsers? The main reason some of us did is that if you prepare your web pages for XHTML, which we thought was going to supersede HTML, you will not have lots of time-consuming editing to do later and it seemed neater to close all tags properly and to use lower case for element and attribute names. This was a valid reason, but probably not now that pure XHTML will never be used for normal websites.

HTML syntax markup

See HTML Syntax and HTML4 Specification regarding elements and attributes. These standards also apply to HTML5.

XHTML syntax markup

The following comments relate to XHTML syntax markup coding, so if you are coding HTML, ignore the different codes except that it is often (unofficially) recommended that you use lower case for element and attribute names even for HTML.

If you do choose or have already chosen XHTML 1.0 doctype and syntax it is good discipline for you. It is only slightly more onerous than HTML coding and worth the extra effort. Although browsers may be processing to HTML standards, validators will be checking that your coding conforms to XHTML syntax standards so validate (check) your XHTML and CSS code using the validators (see Links) and you will have code ready for true XHTML standards if you ever want to upgrade to pure XHTML. Major browsers can tolerate a surprising number of errors but don't rely on that, especially with XHTML.

Don't use upper case (capitals) for element and attribute names in styles. XHTML forbids the use of capitals for codes although HTML does not. This is a major difference and conversion of HTML files to XHTML requires all capitals in codes to be changed.

Another principal difference is that all tags need to be closed where in HTML many could be left unclosed; notably meta tags, image tags, <br>, <hr>, form input tags and object parameter tags which need closing with /> in XHTML instead of just >. Also HTML allows some tags like <p> to be left unclosed (without a </p> tag) but tags must be closed in the XHTML syntax.

XHTML is a reformulation of HTML. The w3.org XHTML 1.0 and 1.1 links do not repeat all the basic codes. For basic coding use HTML 4.01 and then check with XHTML 1.0 for code differences and with XHTML 1.1 if you are using XHTML 1.1 for pure XHTML. See the comments regarding XHTML 1.0 and 1.1 in Doctypes above. However, most of the content of the last two links is irrelevant if you are moving on to the HTML5 standard.

Note that Wikipedia says Of the two serializations, the W3C suggests that most authors use the HTML syntax, rather than the XHTML syntax.. However, many people prefer to use the XHTML syntax because it seems neater and more logical to close all tags and use lower case for all element and attribute names. In fact, the official HTML 4 Specification says that all element names should be in upper case and all attribute names should be lower case to distinguish them, but many developers still prefer to use the XHTML syntax with HTML doctypes as HTML is case insensitive.

HTML and XHTML in the future

There are some useful comments in X/HTML 5 Versus XHTML 2 under "background".

HTML 4.01 will be supeseded by HTML5 and must be used with <meta charset="utf-8"> although the charset can be varied. It won't need to include content="text/html; inside the meta tag if the new HTML5 doctype is used. w3.org states that This is the format recommended for most authors. The doctype will be <!DOCTYPE html>. See w3.org HTML5.

XHTML 1.0 was going to be superseded by XHTML 2 but XHTML 2.0 has been terminated and XHTML5 must be used with <meta http-equiv="content-type" content="application/xhtml+xml" /> for pure XML languages like SVG and Math ML and is not recommended for normal websites. IE6 will never process pure XHTML with the correct content type and pure XHTML will be so strict that any minor error like a missing period or comma will result in the page not rendering at all, possibly just an error statement like incorrect PHP shows. Pure XHTML can be written now with XHTML5 and an XML declaration <?xml version="1.0" encoding="UTF-8"?> above the html tag is essential. See w3.org XHTML 2.

X/HTML5 is a curious compromise. The doctype will be <!DOCTYPE html>. Markup can be to HTML syntax standards, like closing tags with > and other matters like case insensitive element and attribute names, or to XHTML syntax markup standards like closing tags with /> and using lower case for element and attribute names and other matters. HTML5 markup can use merely <meta charset="utf-8">, while XHTML5 markup for use in normal websites (ie not pure XHTML) must use <meta http-equiv="content-type" content="text/html; charset=utf-8" /> (or another charset) and both will be processed as HTML. However, using the XHTML syntax with HTML5 is called "tag soup" as stated in Wikipedia which used to say:- Use of XHTML syntax in a document which is served as HTML. Serving XHTML code to browsers and telling them it is HTML constitutes serving tag soup, because the browser has no choice but to interpret it as HTML-like markup with "syntax errors". HTML5 doesn't seem to mind which syntax you use provided it is written with content="text/html; charset=utf-8" or another charset.
If the markup is written to pure XHTML standards with the <?xml version="1.0" encoding="UTF-8"?> declaration and <meta http-equiv="content-type" content="application/xhtml+xml" /> is included, full XHTML standards will apply.

You may see references on this site to HTML and XHTML and to a large extent the terms are interchangeable.


HTML, head and body tags

HTML needs the <html> tag after the doctype and </html> at the end of the page code.

The html tag encloses the head and body sections of a web page. For details of the head section see A basic webpage. The body section encloses the page markup code as described in the remainder of this tutorial.

The xmlns attribute inside the <html> tag is required in XHTML (but not in HTML) as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
See w3.org xhtml_syntax which says:-
However, the validator on w3.org does not complain when this attribute is missing in an XHTML document. This is because xmlns="http://www.w3.org/1999/xhtml" is a fixed value and will be added to the <html> tag even if you do not include it. I believe that it's only relevant to xml documents and not to html or xhtml but I find that the validator does raise an error if the xmlns code is missing so it's wise to include it (in XHTML, not in HTML).

The xmlns attribute for XHTML is often followed by a language code xml:lang="en" lang="en":-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
which is important for foreign languages but seems optional for English as the validator does not raise an error if it is missing.


Coding generally

Use Notepad or Wordpad as a freely available text editor, or download Notepad++. Don't use Word which creates unwanted special functions with certain characters like ' and ".

You can put comments in your html file to explain what you have done to help you when editing later.
This beginning and end character sequence <!--   --> creates an invisible note only seen in the coding file. It can also be used to cancel sections of code in the body section. See further comments in the Stylesheet section below.

The following items are just my advice and not all are obligatory.

Don't use capitals for element names. HTML 4.01 and HTML 5 are case-insensitive but XHTML is case sensitive and must use lower case element names. The HTML 4.01 Specification recommends upper case for element names and lower case for attributes to distinguish between them. However, a few years ago many people switched from HTML 4.01 to XHTML 1.0 and that meant editing all element names to lower case. You might also wish to switch doctypes in the future, so save yourself trouble by using lower case for element names and attributes. HTML 5 follows the HTML 4.01 recommendations.

Don't put spaces in filenames. Some browsers add %20 in spaces which when put several times in long filenames makes them very difficult to read and edit. Some browsers will fail to read the filename with a space.

Don't put an underscore _ in filename spaces. An underscore is allowed but when such filenames are used as links there will usually be an underline which will obscure the underscore and the viewer copying the filename may think it is just a space there. There have been instances where a person has read out a filename to a colleague and read a space where there was a concealed underscore and of course the filename did not work when later used.

Avoid using hyphens in filenames. Although they are valid with urls, they may cause problems with some coding languages. Some other languages had a function attached to a hyphen, see filename limitations hyphen must not be first character but it seems irrelevant advice for most HTML purposes.

Don't use capitals for filenames. Most browsers are case-insensitive but it's good practice to use lower case everywhere and get in the habit of it to avoid confusion as servers are case-sensitive.
It is also important with filename extensions. I had a photo software package that created a file extension like .JPG in capitals and I had coded the filename using lower case for the extension. On my computer the browser ignored the difference and the image displayed. When I uploaded the files to my hosting service and viewed the page online the image did not show because the host's server distinguished between capitals and lower case.

Don't use certain characters in filenames, see reserved characters.

Don't use a number like #2 or #2col or .3 or .3div for a style id or class name or at the beginning of an id or class. Some browsers will fail to process the style.

Don't get "divitis" ie using too many divs nested inside other divs, although using wrapper or container divs is desirable in many cases as long as it's kept to a minimum.

Don't use tables for page structure, use other elements, usually div. Tables are meant for tabular data like schedules of products with prices or names, addresses and telephone numbers (although the list element may be a suitable alternative).

Always have a simple HTML alternative if you use javascript for page structure as some people have javascript disabled by the firm's IT department and cannot enable it. Make sure pages degrade to something reasonably sensible if javascript is disabled.

Always have a sitemap with plain hyperlinks, often situated at the bottom of the page. This is important if you have a main menu that is javascript or is a dropdown or flyout which may not work. A sitemap is a list of links to other pages in your website or anchors to places/sections of your website and can be just plain links on the same page or just one link to another page that holds all the links. It should be plain hyperlinks so that it works if javascript is disabled or a dropdown/flyout menu doesn't work.

Learn HTML5 and CSS3. Remember that older IE browsers don't process the new html5 tags like <section> unless you use a javascript shiv or shim to add them to the DOM. Some of the new CSS3 elements like <video> (and text-shadow in IE6/7/8/9) won't work in older browsers so be careful how or even if you use them.

HTML5 and CSS3 go together and are both upgrades of HTML4.01 or XHTML 1.0 and CSS2. They are mainly new elements like <section> <aside> <header> which are an alternative to id or class applied to older elements like div, and new features in CSS3 like text-shadow, box-shadow, etc. See caniuse.com and click on any feature to see which browsers support it. The shiv or shim javascript is added in the page head section in a conditional comment that only applies to lt IE 9 (less than IE9):-

The shiv code means that in an older IE browser, you can style <section> and the other new tags with margin, background-color, etc. whereas if you didn't have the shiv the new HTML5 element tags would be ignored causing a wrong display. However, the shiv will only allow the older styles from CSS2 and won't allow the new processing for new <video> or <audio> tags so video and audio still need to be coded using object and embed tags if you want them to work in older IE browsers.

Always check for HTML errors at w3.org and CSS errors at jigsaw.w3.org.

Don't use Word as a text (code) editor as Word carries special attributes with some characters like " and ' which will affect the display so always use Notepad (or Wordpad) found on all computers which are plain text or Notepad++ or a specialist text editor.

See more general rules in Stylesheet rules below.

Older methods of coding in HTML without stylesheets used codes inside the html tags using the = sign and " as in <img border="1">. However, although this method of coding still works in many cases it is better to use the CSS method with HTML/XHTML everywhere.

The CCS method of coding uses style with a colon : between the attribute and the value.
If used in the body html tag it is like this:-
<img style="border: 1px solid black;">
If used in the head of an html page the code is:-
<style type="text/css"> img { border: 1px solid black; } </style>
A semi-colon ; is used between each attribute where there are several as in
<style type="text/css"> img { border: 1px solid black; margin: 10px; } </style>
although not required at the end before the closing } it is probably a good idea to do this so that when adding extra attributes it is not forgotten.

The third and preferred method is to use a stylesheet as described later on this page.

Items that require attributes to four sides of a rectangle can have them coded individually as in margin-top: 15px; or as margin: 15px 20px 15px 20px; where the order is top, right, bottom and left or with top and bottom grouped first and left and right grouped last as in margin: 15px 20px; or just three sizes margin: 15px 20px 15px; where the order is top then both left and right each 20px then bottom or all of them together as in margin: 15px;.

White-space and "hard" space

Browsers will sometimes ignore or collapse a space created with the keyboard space bar or the "Enter" key; for instance if you make a space between two <p> tag paragraphs; it won't create any extra space. In situations where you must have a space, use &nbsp; (a non-breaking space) which is a "hard" space; it behaves like a text character but shows nothing.

It is useful if two words are required to be together and not break at a line break. Joe&nbsp;Smith will not break into separate lines as the "hard" space makes the two words into one continuous word.

If you have lots of similar situations, perhaps in lines of poetry where you do not want line breaks in unusual places, put each line into a span tag with white-space: nowrap; which saves putting &nbsp; in hundreds of places. It will make each line behave like one very long word, so it may cause a horizontal scrollbar but at least the poetry will be in distinct lines.

<span style="white-space: nowrap;">Higher still and higher</span>
<span style="white-space: nowrap;">From the earth thou springest</span>
<span style="white-space: nowrap;">Like a cloud of fire;</span>
<span style="white-space: nowrap;">The blue deep thou wingest,</span>
<span style="white-space: nowrap;">And singing still dost soar, and soaring ever singest.</span>

The above code will ensure that lines do not break, even if someone increases text size or narrows the window which reduces the width of a containing div. The text will either be cut off or expand beyond the container or expand the container like the effect on a fixed width image.

Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.

See w3.org for text properties.


Colors

These can be coded by name as in color: blue; or as three HEX numbers as in color: #00f; or as the full HEX six-figure code as in color: #0000ff;.

See w3schools for common names and HEX codes. Note that only sixteen names are officially supported by all browsers but the ones shown are supported by the main browsers.

It is advisable to use the codes if possible in preference to the names and use lower case for XHTML.


Links or hyperlinks are made with this code:-

<a href="introduction.php">Introduction</a>

for a file in the same directory or like this for an external url:-

<a href="http://www.wickham43.net/introduction.php">Introduction</a>

For advice on folder structure and code for linking between folders (often called directories when related to your host's server) see Basic Webpage

Browsers have default link colors and a viewer may not have edited these or he may have changed to colors he prefers. You can make your webpage show colors that you want by using these styles either in a stylesheet or inside style tags in the page head section (note: you can leave some out so that default colors are used but the ones you state must be in the following order):-

a:link { color: #de7007; outline: none; } /*unvisited link orange*/
a:visited { color: #008080; outline: none; } /*visited link teal*/
a:focus { color: #483d8b; outline: none; } /*focus link DarkSlateBlue/
a:hover { color: #996633; outline: none; } /*hover link dark brown*/
a:active { color: #800080; outline: none; } /*active link purple*/

The main feature of a:focus is to help people who use the tab key for tabbed browsing instead of a mouse, which means that they cannot highlight a link by hovering the mouse. Some disabled people cannot use a mouse, other people who use a laptop may not have a mouse and don't use the touch pad and others prefer to use tabbed browsing. See SitePoint for some general advice. As you use the tab key it should highlight the links one by one according to your style setting so that the viewer always knows which link will activate when he uses the Enter key. Use Shift+Tab in IE to go in the reverse direction. IE7 doesn't support a:focus, using a:active and a dotted outline instead.

Safari for Windows operates the tab key for browsing provided that the checkbox "Press Tab to highlight each item on a webpage" is checked in Edit Preferences Advanced. Opera uses the Q and A keys for tabbed browsing in old versions, CTRL+ up or down arrows in version 9.5 but without styles, just white text on a blue background.

Firefox doesn't treat a:active the same way as IE7. If there isn't an a:focus style, when you use a link to go to another page and then use your back button to go back to the original page, IE7 will show the active color on the link you have already used until you click somewhere on the page when it will change to the visited color, but Firefox does not. Firefox only shows the active color while you press the mouse button over the link and not when you have been to another page and then returned to the first one (which is more correct - as it is just when being activated). IE8 and above seem to work like Firefox.

However, if there is a:focus and you follow a link to another page and then return to the original page using the back button, Firefox and IE8 and above show the focus style until you click somewhere on the page.

Firefox shows a dotted outline around links normally and many website designers dislike this function. It can be cancelled by adding outline: none; to all anchor states including a:focus. The dotted outline is provided for accessibility purposes so you should not remove it unless you have coded a:focus with a different style, color or background color as an alternative. IE5 to IE7 do not support the outline property so you cannot use it to delete the outline in IE5 to IE7. IE8 and above does support outline.

See Link classes for classes to use different link colors for specific items and Link attributes for more details on link attributes.


Images and image links

The basic code for inserting an image is:-

<img src="imagefilename.jpg" alt="image title">

The tag must be closed with > in HTML but with /> in XHTML.
The alt="..." is for descriptive text in case the image does not load. In the case of an image link this should be a description of the link as well as of the image. When viewing with IE6 the alt attribute will show in a popup but Firefox does not show this popup when the image shows, only when the image does not load. In Firefox you have to right-click the image and click properties to see the alt description. If you want Firefox to show an image description as a popup, use title="..." as well as alt. You have to include alt or the page code will not validate.

The code for an image used as a link would be:-

<a href="http://www.w3schools.com"><img src="images/gray16x16.jpg" alt="Gray image link to w3schools"></a>

or just "filename.html" in the <a href=" "> tag if the target file is local in the same folder/directory.

Normally an image used as a link will have a highlighted border which changes color on hover, like text links, using the viewer's browser default link colors or the colors coded for text links in a stylesheet; Firefox shows colors for all link states, IE7 on XP and IE8 on Vista show the normal link, visited and hover colors while IE7 on Vista and IE6 don't show the hover or active colors in this example:- Link to introduction

<a href="introduction.php"><img src="images/gray16x16.jpg" alt="Link to Introduction"></a>

If you don't want image links to show any colored border then put this style in your stylesheet or head section style tags:-
img { border-style: none; }

Generally for this website I have put img { border-style: none; } in the main stylesheet to stop all image link colors so I had to edit it back to the normal state with <img style="border-style: solid;" src="images/gray16x16.jpg" alt="Link to Introduction"></a> in the html body code to show border colors in this example.

See this page for an example of an image with a flexible height and also a problem in IE where an image in a table is just too wide for the screen resolution.


Image link border colors

Special border colors for image links can be coded by these styles (the initial style a img is needed only on certain occasions for Safari and Google Chrome as both are based on the WebKit engine):-

a img, a:link img { border: 2px solid #ff0000; }
a:visited img { border: 2px solid #0000FF; }
a:hover img { border: 2px solid #009933; }
a:active img { border: 2px solid #00FF00; }

in this normal image link code:-

<a href="introduction.php"><img src="images/gray16x16.jpg" alt="Link to Introduction"></a>

The styles and markup above will apply to the whole page unless you create special styles for one or more special links. In all cases below the special styles should be placed after the general styles in the stylesheet or head section style tag so that the special styles are processed last and are not overridden by the general styles.

You put an id or class for the "a" element only where you want the special styles to be used:-

a.imageborder1 img, a.imageborder1:link img { border: 2px solid #ff0000; }
a.imageborder1:visited img { border: 2px solid #0000FF; }
a.imageborder1:hover img { border: 2px solid #009933; }
a.imageborder1:active img { border: 2px solid #00FF00; }

as in the following image link example and code. (The initial style a.imageborder1 img is needed only on certain occasions for Safari and Google Chrome as both are based on the WebKit engine):-

Link to Introduction <p><a class="imageborder1" href="introduction.php"><img src="images/gray16x16.jpg" alt="Link to Introduction"/></a></p>

You can also apply special styles just to a particular element or elements if you code an id or class for the containing element and this may create less code where you have several links, as in a menu:-

#imageborder2 a img, #imageborder2 a:link img { border: 2px solid #ff0000; }
#imageborder2 a:visited img { border: 2px solid #0000FF; }
#imageborder2 a:hover img { border: 2px solid #009933; }
#imageborder2 a:active img { border: 2px solid #00FF00; }

as in the following image link example and code. (The initial style #imageborder2 a img is needed only on certain occasions for Safari and Google Chrome as both are based on the WebKit engine):-

Link to Introduction <p id="imageborder2"><a href="introduction.php"><img src="images/gray16x16.jpg" alt="Link to Introduction"/></a></p>

If you want special border colors for image links on an element other than the "a" tag it gets more complicated as older browsers like IE6 do not support :hover on img or any other element than "a" so one main code can be used for modern browsers like IE7, Firefox, Safari and Opera but a conditional comment, a special behavior file and ActiveX have to be used for IE6.

Here I have used the same orange color for the normal, link and visited states, a lime green border for the hover and skyblue for the active states, but you could have all different colors. Link to Introduction (The active color when you press the mouse button works in all browsers including IE6 except IE7, so the method using a class or id on the p tag as the previous example or on the a tag and not on the img tag suits IE better.)

The code in the head section style tags is:-

img.imageborder, img.imageborder:link, img.imageborder:visited { border: 2px solid orange;}
img.imageborder:hover { border: 2px solid lime; }
img.imageborder:active { border: 2px solid skyblue; }

showing a class .imageborder for this example applicable to the "img" element. The html body code is:-

<a href="introduction.php"><img class="imageborder" src="images/gray16x16.jpg" alt="Link to Introduction"></a>

The above code doesn't work in IE6 without extra code. You need to download a behavior file csshover.htc file from whatever:hover at the bottom of its page where it says version 1.42.060206 download. Put this file in the same folder/directory as your html page. There's no need to look in it; it's got lots of complicated javascript.

Put this AFTER the stylesheet links or style tags in the head section of the html page:-
<!--[if lt ie 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc); }
</style>
<![endif]-->

where lt ie 7 means less than IE7 for IE6 and other previous IE browsers.


Background-images

Wherever background-images are used you should show a background-color too in case the image does not download or doesn't cover the whole window, either grouping the image and the background with the color first:-
header { background: #333333 url(filename.jpg); }
or separately:-
header { background-image: url(filename.jpg); background-color: #333333; }

If you want to have a background image for the whole page, put a style for the body element in a stylesheet or in the head section style tags like this:-
body { background: #333333 url(imagefilename.jpg); }
A substitute color ref #333333 is also given in case the image does not load or doesn't cover the whole window.

If you want the background-image to stay fixed during scrolling, add background-attachment: fixed; as in:-
body { background: #333333 url(imagefilename.jpg); background-attachment: fixed; }

A background-image by default will start at the top left corner of its body or containing element. It can be placed in other positions by using the attribute background-position: 50% 30%; which will position it 50% horizontally and 30% down from the top in whatever body or element it is in. See other position attributes at w3schools.

Background-images will repeat horizontally and vertically by default to create a tiling effect. If you have a background-image that does not start at the top left corner you will probably not want it to repeat so add the attribute background-repeat: no-repeat; or repeat-x to repeat only horizontally or repeat-y to repeat only vertically instead of no-repeat.

A background-image can be added to several elements, usually a body, div box or table.

You can have several background-images in various elements including the html, body and a #wrap div as shown on Multiple background-images for CSS2 where IE6 to IE8 are supported but CSS3 does support multiple backgrounds in a single element as shown in CSS3 multiple backgrounds where IE6 to IE8 are unsupported.

Background image full width stretching to any width

This example is not a true background-image; it's just a normal image inside a div with a position tied to both sides and with width: 100%. A background-image would not be able to stretch with different window resolutions except that CSS3 (unsupported by IE6 to IE8) does support background-size in %.


Horizontal Rule

Although you might think this is a very easy tag to code, browsers behave very differently. The basic code is <hr> but some browsers need a height. All browsers use the color property, but Firefox, Opera and Safari need background-color to fill the middle when the height is 2px or more. All browsers can show a border around a horizontal rule in certain circumstances when the height is 2px or more.

See some examples of the various ways different browsers show a <hr> tag and recommendations here.

Firefox hr tag shows color with color (not with background-color) for default height (no height stated) with a gray top border. If you give Firefox hr tag a height 2px or more it will show a gray top border with color for the bottom border with inherited color in the middle so it needs a height and border: none and a background-color to fill the middle.

Opera hr tag (like Firefox) shows color with color (not with background-color) for default height (no height stated) with a gray top border. If you give Opera hr tag a height 2px or more it will show a gray top border with color for the bottom border with inherited color in the middle so it needs a height and border: none and a background-color to fill the middle.

Safari hr tag with default height (no height stated) doesn't show color with color or background-color, you have to add border-style: solid; with a color. Safari with 2px or more height shows top and bottom gray borders with inherited color in the middle. Safari with 2px or more height and a background-color shows the background-color with a gray top border so it needs a height and border: none and background-color to fill the middle.

IE hr tag shows color with color (not with background-color) for default height (no height stated) without a gray border. If you give IE hr tag a height 2px it will show a gray top and bottom border with no space in the middle (just a thick line) or a solid color line without borders if you have stated the color. If you give IE hr tag a height more than 2px without color stated it will show a gray top and bottom border with inherited color in the middle. If you give IE hr tag a height more than 2px with color stated it will show a solid color line so it does not need border: none and a background-color to fill the middle like other browsers. If you give IE hr tag a height more than 2px with background-color stated but no color it will show gray top and bottom borders even with border: none; with a background-color in the middle.

It seems best to cater for all the above browsers with a general stylesheet style:-

hr { height: 2px; color: #de7008; background-color: #de7008; border: none;}

Background-image for horizontal rules

All major browsers allow setting a background-image of the <hr> element:-

hr { background-image:url(hr1.gif); border: none; }

which works in all browsers. Firefox, Opera and Safari need border: none; however, IE still shows a border even if border: none; is stated. If IE has a color in the basic hr tag style for use in horizontal rules elsewhere on your page without a background-image, it will use the color instead of the background-image in this code (but with no border) so it is better to use a div with a background-image and no text in it to suit all browsers. The following rule is using a 1*1px image coded 2px high.

 

The html body code is:- <div class="line2">&nbsp;</div>

with stylesheet code:-

.line2 { background-image:url(images/divider1x1.jpg); height: 2px; line-height: 2px; font-size: 2px; border: none; padding: 0; margin: 0; }

or with background-color instead of background-image:-

 

The html body code is:- <div class="line">&nbsp;</div>

with stylesheet code:-

.line { background-color: #666666; height: 2px; line-height: 2px; font-size: 2px; border: none; padding: 0; margin: 0; }

It is wise to state the line-height and font-size as some browsers may try to apply the default character height unless you specify these attributes.

See sovavsiti.cz for general information.


Vertical text and image alignment

If text and images are combined on a line in a <p> tag the image bottom will align with the text bottom
like this:- Lark Meadow Brown.

If an image is required to align vertically with the center of text like this:- Lark Meadow Brown use this code:-

<p>If an image is required to align vertically with the center of text like this:- <img class="valignmiddle" src="images/lark50x50.jpg" alt="Lark"> <img class="valignmiddle" src="images/meadowbrown34x34.jpg" alt="Meadow Brown"> use this code:-</p>

CSS code:-

.valignmiddle { vertical-align: middle; padding: 0; margin: 0; }

The vertical-align: middle is only required for the image in this case. An image is an inline element and the vertical-align attribute lines it up to the middle of the element it is inside, which is the centre line of the <p> tag.


Styles and Stylesheets

It is recommended that you use a stylesheet right from the start. If you code styles in each body element tag, they soon get repetitive and later editing is time-consuming. Similarly if styles are put within <style>...</style> tags in the head you will have to change every page when editing.

Insert this code in the head section of your page:-

<link rel="stylesheet" href="style1.css" media="all" type="text/css">

Create a separate file in Notepad called style1.css which includes just the styles - no html, head or body tags. It will have codes like:-

body { font-family: arial, monospace; line-height: 1.1; color: #335500; font-size: small; margin: 20px; background-color: #e9e9e2; }
* { margin: 0; }
h1 { text-align: center; font-weight: bold; color: #de7008; }
h2, h3, h4, h5 { font-weight: bold; color: #996633; }
h4 { text-decoration: underline; }
.psmall { font-size: small; }
.code { font-family: "Courier New", monospace; color: #774411; }
div { padding: 3px; border: 1px solid black; }
#containerfullwidth { width: 100%; padding: 0; }
.leftcol { width: 40%; clear: both; float: left; padding: 5px 0; border: none; }
.noborder { border-style: none; }

The above example has several categories:-
body should include the styles applicable to most of the pages and the page layout properties. Note that the body has a default margin all round of 8px in all browsers (it looks about 18px at the top and bottom in IE because of the scrollbar top and bottom arrows). Add margin: 0; to the body style if you don't want this default space.
* before a style as in * { margin: 0; } will apply to all elements in all browsers as the * means applies to all. If the * is followed by html as in * html { font-weight: bold; } or in * html h4 { color: red; } it will only apply to IE6 or earlier IE versions.
Individual elements like h1 can have their styles listed. If a style applies to several elements like h2, h3, h4, h5 they can be separated by a comma , (not after the last one).
If one element in a group like h4 has an extra style, show it again just for the extra style.
Styles beginning with a period like .code are classes which are intended to be used in many situations on a page. This code could be used inside a span tag every time the text was required with monospace font or inside a div tag each time a div is required on the left like <div class="leftcol">...</div>. A class can be used with several elements; for instance a class .noborder could be used with image or div elements.
Styles beginning with # should only be used once on a page. They should be reserved for major parts of the page like a containing div and included in code like this:- <div id="containerfullwidth">...</div>
Note that stylesheets use curly brackets; spaces are not normally critical.
Don't use a number like #2 or #2col or .3 or .3div for a style id or class name or at the beginning of an id or class. Some browsers will fail to process the style.

You can put comments in your html file to explain what you have done to help you when editing later.
This beginning and end character sequence <!--   --> creates an invisible note only seen in the coding file. It can be used in the head or body sections of an html file but not within style tags in the head section nor in a stylesheet. It can also be used to cancel sections of code in the body section.
Inside a stylesheet or within style tags in the head section use /*   */ tags to enclose notes or to cancel styles.

The order in which styles are given is important. Here are some examples:-
In the stylesheet:- #menu span { color: red; } means that html code should be
<div id="menu"><p>Some black text; <span>this text will be red</span></p></div>.
However, <span><div id="menu"><p>This text will not be red</p></div></span> because the span is in front of id="menu" while in the style it follows. Text will only be red where span follows menu; there could be other styles for span either on its own or following other id or class attributes.
In the stylesheet:- span { color: blue; }
In the html:- <span><div id="menu"><p>This text will be blue</p></div></span>.
In the stylesheet:- #menu.greentext { color: green; } means that html code should be:-
<div id="menu" class="greentext"><p>Green text</p></div>
This code <div id="menu.greentext"><p>Green text</p></div> does not show green text because the html is showing the class .greentext as part of the id when it should be separately shown as a class.

Always code in the stylesheet for codes that apply in most circumstances, code in the style tags in the head section of a page where that particular page has several occurences of a certain code that doesn't appear on other pages and code one-off situations in the html tag.
For instance, if paragraphs are normally in black font color but occasionally one is in blue, you have several choices:-
<div id="menu">
<p>This paragraph will be normal in black font color.</p>
<p style="color: blue;">Blue text paragraph</p>
</div>

or create a class in the stylesheet or in head style tags for blue text if it may occur occasionally in several places:-
.bluefont { color: blue; }
and html code for the specific paragraph:-
<p class="bluefont">Blue text paragraph</p>
or use span tags as described in the previous paragraph:-
<p><span class="bluefont">Blue text paragraph</span></p>
In the previous situation where only the second paragraph is required in blue text, use another style of p + p.
The style in the stylesheet or in head style tags is:-
p + p { color: blue; }
and in the html:-
<div id="menu">
<p>This paragraph will be normal in black font color.</p>
<p>Blue text paragraph</p>
</div>

As you will see, there is no apparent difference between the p tag paragraphs but the style of p + p means that the first paragraph is normal but the style only applies to the second and further p tags in the same sequence, until that sequence ends, usually with a div closing tag. Unfortunately, this method doesn't work in IE6.

Combined element with id or class

Typical styles would be:-

div#menu { text-decoration: underline; }
p#menu { font-size: 24px; }
div.contact { text-decoration: underline; }
p.contact { font-size: 24px; }

with html markup:-

<div id="menu">Menu links</div>
<p id="menu">Menu</p>
<div class="contact">Contact links</div>
<p class="contact">Contact</p>

Note that there is no space in the style between the element and #menu or .contact where the id or class is to be inside the element markup. When you specify the element like div or p, the style will only apply to that element so you can repeat the id (like #menu) or class (like .contact) for another element with a different style (as shown). It's bad practice to have the same id name more than once on a page, so you should use the same id style (like #menu) for different elements provided that they appear on different pages.

Combined id and class

A typical style would be:-

#menu.underline { text-decoration: underline; }

with html markup:-

<div id="menu" class="underline">Menu links</div>

Note that there is no space in the style between #menu and .underline.

You cannot combine two ids for the same element like these examples:-

#menu #houses { text-decoration: underline; }
#menu#houses { text-decoration: underline; }

either with or without a space between the ids in the style code for either of these markup codes:-

<div id="menu" id="houses">Menu links</div>
<div id="menu houses">Menu links</div>

but you can use the style with two ids separated by a space:-

#menu #houses { text-decoration: underline; }

where there are two elements (like divs) and one is inside the other:-

<div id="menu">
<div id="houses">Menu links</div>
</div>

Combined classes and contextual selectors

In the head of this page I have put the following styles:-
#heading { color: #808000; border: none; } /*olive*/
.khakibackground { background-color: #f0e68c; }
.boldfont { font-weight: bold; }
.underline { text-decoration: underline; }
em { font-size: 20px; }

Classes can be combined in the html markup:-
<div class="khakibackground bold underline">Text in div</div>
where the separate classes .khakibackground .bold and .underline in the stylesheet will all be operated in the div. Note the spaces without commas in the markup.

The example below uses an id for the heading, a main class, a span tag and an em tag which is more long-winded but may be appropriate in some situations. The span and em tags can have their own default style in the stylesheet or head or have attached classes of their own.
The em tag gives italic text by default.
Normally you would put as many styles as possible in the first tag, the heading id, but if you have several heading divs each with different font color, background-color, underline, etc. it may be more convenient to use a class and span and em tags in addition.

 
Olive text in heading with khaki background-color with font-weight: bold and font-size: 20px underlined

<div id="heading" class="khakibackground"><span class="boldfont"><em class="underline">Olive text in heading with khaki background-color with font-weight: bold and font-size: 20px underlined</em></span></div>

Heading in gray font, 30px normal

The style is:- h1 em { color: #808080; font-size: 30px; font-style: normal; } /*gray*/
The html is:- <h1><em>Heading in gray font, 30px normal</em></h1>
This means that font will only be gray and 30px where em follows h1 in the html.
Wherever else em is used without a class it will be 20px because of the style in the head for em on its own (and italic by default if not given font-style: normal) and with default color. In the first example em is olive rather than the default color because the heading id which is part of the same html sequence changes the color for the whole div.
Where em has a class attached it can be something different again.
So with careful use of classes and the way you state selectors in the stylesheet you can get even more variables.

Here are some more examples of classes and the way they can be used:-

1. The link on the word Introduction uses a class on a span tag before the a href tag.

Style:-
.menulink a:link { color: orange; } /* unvisited link */
.menulink a:visited { color: navy; }
.menulink a:hover { color: red; }
.menulink a:active { color: green; }

Html:-
<span class="menulink"><a href="introduction.php">Introduction</a></span>

2. The link on the word Introduction uses a class on the a href tag.

Style:-
a.menulink:link { color: blue; } /* unvisited link */
a.menulink:visited { color: olive; }
a.menulink:hover { color: lime; }
a.menulink:active { color: gray; }

Html:-
<a class="menulink" href="introduction.php">Introduction</a>

3. This code <a.menulink href="introduction.php">Introduction</a> won't work because the class has not been identified properly with class=".." in the body html.

Style:-
a.menulink:link { color: blue; } /* unvisited link */
a.menulink:visited { color: olive; }
a.menulink:hover { color: lime; }
a.menulink:active { color: gray; }

Html:-
<a.menulink href="introduction.php">Introduction</a>

In the above examples it is neater to use item 2 with the attached class a.menulink:hover because the class for a link will never apply except in an a href tag.
However, it is often more convenient to use an unattached class like .noborder because the class can be used with several elements like div, table. img and others. If you create a style like div.noborder it will only apply to a div with class="noborder" so when you want the same style later in your web page construction for an image you have to create a new style img.noborder or go back and alter previous coding to create an unattached class.

Styles in the stylesheet can also be combined either with a space between the classes:-
.red .underline { color: pink; text-decoration: underline; }
or without a space between the classes:-
.green.italic { color: lime; font-style: normal; }
but the effect is completely different. See Class styles test.
The first applies to separate divs where one is nested inside another; the first div with class="red" will be red but the second with class="underline" will be pink instead of the default color because it follows the red div. The last code applies to a single div where both classes are coded in the markup for that div.

Alternate stylesheets

You can code Alternate stylesheets.

General style rules

Browsers have different default margins or padding for some elements like h1 to h6 and p tags, so it is important to make all browsers display the same (usually by setting to 0), then style the various tags the way you want them to be in all browsers. Most people use a reset like Meyer's Reset at the top of your stylesheet. However, it is a bit bulky and I sometimes leave out bits that I think I will never use or even edit some of the styles. You can just use

* { margin: 0; padding: 0; }

which will do most of what Meyer's reset does.

In both cases you then have to set margin and/or padding for the elements that now have 0, like h1 to h6, p, li, etc. in individual styles following the reset.

Close self-closing tags with a / like <hr /> <meta........../> <br /> and a few others when using HTML5 or XHTML (but not necessary with HTML 4.01) and close other tags like <p>...</p> with </p> which HTML allows to be unclosed but XHTML says have to be closed and most people follow the XHTML rules for HTML5 which supports both methods and most people think it's neater and better to close tags.

Don't use a number like #2 or #2col or .3 or .3div for a style id or class name or at the beginning of an id or class. Some browsers will fail to process the style.

There are some other basic rules as set out in Coding generally above.


Special tags and displaying code as text

The <pre>...</pre> tag

The pre tag is for pre-formatting text. If you have set out some text code in your text editor like Notepad with tabbed spaces, line breaks, single line spaces or perhaps several line spaces between lines, you can put <pre> and </pre> tags around it and it will preserve the formatting on the viewed page. If you don't use the pre tags you will have to insert lots of <p>...</p> or </br> tags to maintain the spaces or line breaks. It can also be used when copy/pasting text from elsewhere; you just put pre tags around it.

The <code>...</code> tag

The code tag is to enable screen readers for disabled people to know when code has been displayed on the page as text and not as code to be operated by the browser, so it has no effect on what you see on the page unless you create a style for it like this:-
code { font-family: monospace, sans-serif; color: brown; }
which will then display the code in a different style so that people who are not disabled can see a difference from normal text.

Displaying code tags as text (not operated as code by the browser)

The < at the beginning of all tags like <div> and <!-- will tell the browser to operate the tag and not display it, so you need to use character codes instead. See Special HTML characters. You then type &lt;div>...&lt;/div> instead of <div>...</div> and the tags will display on the page as code instead of disappearing and being operated.

I have found that only the < needs to be changed but code converters change the final > of tags in addition. If you have a lot of code to convert you can use an online Code Converter which will change the < and > to character codes and then you just copy/paste the edited code.


Conditional comments and CSS methods to make styles affect only IE or certain versions of IE or just CSS compliant browsers

Conditional comments

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style conditional comment which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
If there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" media="all" type="text/css"> <![endif]-->
ie6.css will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).
The last method, if the separate stylesheet is completely different from top to bottom, enables a completely different display for a certain browser although the html file will still control the content and arrangement.

The above IF conditional comments should be placed after the style you are trying to correct so they will apply to FF and then be cascaded over in IE6. If the main style for Firefox is in a stylesheet or in head section style tags and one of the above IF conditional comment methods is in the head section of the page, this would be alright provided the conditional comment is AFTER the main stylesheet link or main style tags in the head section.

It doesn't affect IE if the style to be amended is also in the main stylesheet or style tags and the conditional comment is BEFORE the main stylesheet link or style tags. This is because the order is important. If the main stylesheet or style tag is parsed last then the style in that will be used for IE. If a conditional comment is positioned before the main stylesheet link or style tag it will only affect IE for styles that are not in the main stylesheet or style tag.

Anything in the body html tags like <div style="padding: 10px;">....</div> takes priority over styles specified anywhere else.

Firefox, Opera, Safari and IE7 and IE8 are fairly similar and more standards compliant than IE6, so code should be designed for those and the IF IE6 used to correct IE6.

IE conditional comments <!--[if ie]>some html code<![endif]--> These aren't really a hack since IE is programmed to look for them. All other browsers ignore it, since it's in the form of a comment. I think it's more of a concession by the IE programmers who feel sorry for what web developers have to put up with. There are a few arguments it accepts to be more specific on which versions of IE to apply that code to. For more information, see javascriptkit.com
for instance:- <!--[if ie]>   <![endif]--> refers to all IE browsers;
<!--[if lt ie 7]>   <![endif]--> refers to all IE browsers less than IE7;
<!--[if gte ie 7]>   <![endif]--> refers to all IE browsers greater than or equal to IE7;
<!--[if lte ie 6]>   <![endif]--> is a conditional comment for IE browsers less than or equal to IE6;
<![if !ie]>   <![endif]> is a conditional comment for browsers that are not IE; note the different start and end tags with ! before IE denoting NOT.
<![if !ie 6]>   <![endif]> means all browsers not IE6 (which would be IE5, IE5.5, IE7, IE8, Firefox, Opera, etc.).
<![if !lt ie 7]>   <![endif]> means all browsers not less than IE7 (which would be IE7, IE8, Firefox, Opera, etc.).

There are situations where you want different markup as well as different styles for IE6, IE7, IE8 and other browsers. In the next example a table is required for the <ul> tag in IE6 but not for IE7, IE8 and other browsers to enable a drop down or fly-out menu to work and the <ul> tag drop down menu is required to be inside the <a> tag in IE6 (inside its table) but not inside the <a> tag for IE7, IE8 and other browsers. This means that the closing </a> tag needs to be in a different place in IE6. If the </a> tag is placed in the normal position, IE6 will operate it wrongly.

The closing </a> tag is placed in three conditional comments, one for "greater than or equal to IE7" (including IE8) and one for browsers which are not any version of IE, both in the normal position for the </a> tag. Then "less than or equal to IE6" has its own conditional comments to insert the table opening tags and the table closing tags together with the </a> closing tag after the table.

<ul>
 <li class="news1">
 <a href="contact.html">CONTACT
 <!--[if gte ie 7]></a><![endif]--><![if !ie]></a><![endif]>
  <!--[if lte ie 6]><table><tr><td><![endif]-->
  <ul>
   <li><a href="volunteer.html">VOLUNTEER</a></li>
   <li><a href="contribute.html">CONTRIBUTE</a></li>
  </ul>
  <!--[if lte ie 6]></td></tr></table></a><![endif]-->
 </li>
</ul>

CSS methods

Consider the following styles in a stylesheet or in a head section of a page (the [if...] clauses should be in the head section as shown or you can build a whole css file and link to it in a [if...] style):-

Suppose the styles in the head section of a page are:-

<style type="text/css">
* html { font-size: 20px; }
* html p { font-style: italic; }
li>p { color: blue; }
</style>
 
<!--[if ie 6]>
<style type="text/css">
p { color: maroon; }
</style>
<![endif]-->
 
<!--[if ie 7]>
<style type="text/css">
p { color: red; }
</style>
<![endif]-->

If the above styles had been applied to this page, text in <p> tags (provided the <p> tag is not after an <li> tag) would be the color specified for the browser you are using: maroon for IE6, red for IE7 and none (ie default black) for other browsers. Also IE6 text would be 20px italic.

* html { } Only IE<7 (browsers less than IE7) understand this. The * html tells the CSS parser to look for any element (*) with a child <html> tag. Think about this. The <html> tag is the top level tag, so nothing has it as a child. You can follow this with any other selectors you want. Example: * html p { font-style: italic } means that all font in a <p> tag in IE6 or lower will be italic but not in IE7 or other browsers. Note that * { margin: 0; } or * h4 { margin: 0; } where the * is on its own or followed by anything except html will be operated by all browsers.

The > selector as in li>p

So you could use * html for IE6 and lower but > to make a rule only CSS compliant browsers like IE7 and Firefox understand.

Remember the order in which browsers apply styles. The main stylesheet applies styles first, these can be over-ridden by styles in style tags in a page head section; these can then be over-ridden by styles in a conditional comment for a particular version (or all versions) of IE browser and these can be over-ridden by styles in the body html tags. So anything in the body html tags takes priority over styles specified anywhere else.

The !important declaration

Browsers will normally process styles in the order in which they reach them, in other words they start processing at the top of the html file, reach the stylesheet and work down that. If a browser reaches the same style again it will override a previous style. It then processes styles inside head section style tags, then processes the html markup and any inline styles there, all the time using the latest style code if it has been coded before.

The !important declaration will make it have priority if a later declaration of the same style is encountered; but this declaration is not supported by IE6 and previous versions. It can therefore be used to set different styles for IE6.

#main { width: 600px !important; width: 800px; }

600px will be used by modern browsers but 800px by IE6 and earlier versions.

See Yellow Jug for other uses, in particular with min-width and max-width which are not operated by IE6 and earlier versions.


Font-size and font-family, font-weight and font-style

The font properties are as listed in w3schools.

Font can be defined in any style or tag but is usually given default values in the body style like this:-

body { font-family: arial, "Courier New", monospace; line-height: 1.1; color: #335500; background-color: #e9e9e2; font-size: small; }
Fonts with white space in the name should be in double quotes as in "Courier New" in stylesheets or in style tags in the head section but in single quotes where in html body style tags like:-
<p style="font-family: arial, 'Courier New', monospace;">text</p>

Font sizes can be in pts, px, ems or given relative sizes like medium or small. You can also code font-size: 1; where the numbers 1 to 6 inclusive have special meaning as they are relative to the default body font-size so font-size: 3; is not the same as font-size: 3px. The size 3 equates to medium; 1 and 2 being smaller and 4 to 6 being larger. Since these are the only numbers shown in the W3C standards you should not use font-size: 0; but should use font-size: 0px; (or display: none; or visibility: hidden; for the element). Numbers above 6 are extrapolated from the default font-size but may be much too large so don't use font-size: 12; use font-size: 12px.

It is a legal requirement of web page design to allow for people with disabilities. Font given a relative size such as medium is related to the viewer's browser default font size. If you have both IE and Firefox you may find that Firefox has been set at a slightly smaller default font size than IE or it shows a smaller default size for the headings h1 to h5. A partially sighted person can set his browser to View/Text Size/Largest or View/Text Size/Increase and change the font size. This may also change the whole display as text shifts around while images with a fixed size do not.

The disadvantage of setting fixed font sizes in px or pts is that viewers cannot change the font size to suit themselves in IE (they can in most other browsers). It is useful to use px when a container has to be a certain size and changing the text size would ruin the appearance or cause part of the text to disappear, but this fixing of font-size only works in IE so you need to be careful that enlarged text in other browsers doesn't overflow a container with a fixed height into content below or get cut off.

IE, as said above, does not allow the resizing of font-size in px or pt but IE7 and IE8 have a zoom which can be used to enlarge the whole page. Firefox 2.0 has View/Text Size/Increase while Firefox 3.0 has replaced this with a zoom that allows you to increase the whole page or just the text. Opera and Google Chrome have a zoom and in Safari you can increase the text size.

Ems in web pages

Ems are units related to the default font size. As well as using ems for font sizes based on a default size set by the browser or in the body style, another typical use is for container sizes so that if the browser font setting changes, so does the container size. Ems are set in decimals as in { font-size: 1.4em } or { font-size: 0.8em } for a different size than the default, for instance for <h2> or <h5>. Ems allow a viewer to use text size/largest if required and the relationship of font sizes is maintained. See the effect of using ems for div or other element sizes on Ems in web pages.

You should specify a font generic name as an alternative to the family name, even if the family name is a generic type, in case the font-family you have chosen is unavailable on the viewer's computer.
Arial is a family name; generic font-family types are serif, sans-serif, cursive, fantasy and monospace. The generic font-family is given last after the family name separated by a comma.

Every time you specify a color for font you should include a background-color or it will show many times as a warning when you validate your stylesheet. If you have specified different font colors in several styles you can group the background-color into one style:-
header, footer, a:hover, h2 {background-color: #e9e9e2;}
A common situation is where links have been given different font colors for the various states and because they may occur on different colored backgrounds, for instance colored divs or table cells, the background-color has been given as transparent so that the background color of the div or table shows through. This raises a validation warning because some people with color-blindness or impaired vision change the background color of their screens. It may be that one of your font colors is the same as the background color of the div or table or the color chosen by a viewer so that the font does not show. It is better to state a background-color in the stylesheet that you know will cope with nearly all situations and change the style to another color or transparent in the style of a particular page where it causes a problem in the head section. (See the head style of Special Effects where the default link background would be different to the div background-color so the link background has been made transparent to cope with several different div background-colors).

Text should be generally be flexible in size by using relative sizes like medium or small or sized in ems to enable people with poor eyesight to change the font size but there are a few exceptions.

If you have text in a layer over an image, the image is never going to change in size so you won't want the font size to change either. Use px or pts but this only fixes the size in IE. Just make sure it is fairly large.

If buttons in a menu bar are flexible then the font can be also but if the buttons are fixed size then enlarged font may cause big problems. Fix the font size using px or pts (only works in IE) but make sure the buttons and font are large enough for people with poor eyesight with buttons large enough to accommodate larger font. An alternative is to use images for buttons which have text on them which will remain the same size.

If you have a div box which has to be a fixed size and has text in it you will probably have to fix the font size (only works in IE) else larger text will get cut off or extend down below the box over other content (Firefox). Try to make containers without a defined height and check that they expand when larger font is used without disrupting the layout.

When choosing a font for a purpose where the spelling is critical, for instance when displaying code on a website, it is important for the font to distinguish between a small L ( l ), a capital i ( I ), a number 1 and a vertical separator |. Is this word: Ill the word Ill or the number 111? Generally monospace fonts such as Verdana and Courier do make this distinction.

<b> or <strong>; <i> or <em>

The <b>...</b> and <i>...</i> tags are purely visual so use these for thicker or italic text where you want it to look different on the screen, possibly for large sections of text or even a whole page.

The <strong>...</strong> and <em>...</em> tags have special features to help disabled viewers, especially screen readers where different emphasis is given; so only use these tags where single words or short sections of text need emphasis.

Any of the above can be modified by giving different styles, so you could make <b> or <strong> not thicker but normal font-weight and red and <i> and <em> not italic but normal font-style and yellow if you wanted.
b { font-weight: normal; color: red; }
em { font-style: normal; color: yellow; }
.
The screen reader will still create a different empahsis for <strong> or <em>.

See Webmaster World for more details.


Screen resolution and window size

Page width / screen resolution

It is good practice to design pages to display the complete width at a screen resolution that suits the expected screen resolution of your viewers. That used to be 800 x 600 px but this resolution is only used by 1% of viewers now. 1024*768 is used by 20% of viewers but monitors showing 1152*864, 1280*1024, 1366*768, 1440*900, 1680*1050 and 1920*1200 are used by 76% of viewers as at January 2010. However, many users with a high resolution monitor have the page opened in a smaller window, so 1024*768 is still a popular size for a design.

Sites which have to design pages for billions of general public viewers with all types of computer and screen resolution often take a conservative design style. A common solution, especially if also a complex design, is to design with fixed width columns. The main content fits 800 or 1024 px width resolution and less important information such as adverts or links are put further right so that the page may fit a higher resolution but the viewer with 800 or 1024 px resolution still sees the essential data without scrolling horizontally. Another solution is to design for a minimum and maximum width but flexible in between. You can also design pages with flexible (fluid) width but now that some people are using screen resolutions of 1920 x 1200 you will find that designs that stretch from practically nothing to 1920 px wide may become distorted at either the low or high end. In addition, long lines of text are considered difficult to read which is why newspapers, books and websites more than 800px wide split text into fixed width columns.

If the page is designed with fixed 800 or 1024 px width it is often given flexible (auto) margins so that it centers at higher resolutions.

If a webpage is likely to be viewed on a hand-held computer or mobile phone it is adviseable to design a completely different page and use a "sniffer" code which detects the user's screen resolution as the page is loaded and diverts to another page for small-screen devices.

Whatever screen resolution you design your page for, remember to allow for the scrollbar width (most designers allow 20px) and body margins when setting the width of your widest container or image. This width should be further reduced by its own padding, margins and borders which are considered outside the basic container width.

Open link in new window

If you want a link to open in a new browser window, use this code:-
<a href="http://linkedsite.com" target="_blank">Text for link</a>
You can also use target="_new".

It will often depend on the viewer's browser settings whether the link opens a maximised or minimised window.
The target attribute is not validated with HTML/XHTML Strict; you have to use the Transitional Doctype.
(No javascript is required here but it is for the next example.)

This site comments as follows:- Opening new windows is a nuisance and should be avoided. There are very few cases where a new window is acceptable. So try to avoid it, or use the Transitional Doctype.

Open link in new window of fixed size

If you want a link to open a page with a certain width and height that is not full screen, use this code:-
In the head section of the page with the link:-

<script type="text/javascript">
<!-- Idea by: Nic Wolfe (Nic@TimelapseProductions.com) -->
<!-- Web URL: http://fineline.xs.mw -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=500,left = 100,top = 100');");
}
// End -->
</script>

which will set the new window size 600*500px 100px from the top left corner of your screen, with scrollbars if necessary.

In the link:-

<a href="javascript:popUp('linkedfilename.html')">Your link text</a>

You can set whatever sizes you want for the window.
This link here opens the Links page in a smaller window. Remember that not everyone has javascript or ActiveX enabled, so they won't be able to open your link. (If javascript or ActiveX is disabled it will just open this same page again.)

You can use the code for two separate smaller windows. This link here opens the Lists page in a smaller window 400*400px 200px from the top of the window and 400px from the left when a second javascript code is added in the head section:-

<script type="text/javascript">
<!-- Begin
function popUp2(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=400,left = 400,top = 200');");
}
// End -->
</script>

and this code in the link:-

<a href="javascript:popUp2('lists.php')">Your link text</a>

See also this popup generator and Accessible Popup Window Generator which uses javascript normally but allows the link to be viewed on a new page of normal resolution if javascript is disabled.


Anchors

If you want to provide a link to somewhere else on the page, such as to a paragraph out of sight further down or back to the top from the bottom, use an anchor.

Place this code at the position in the html file that you want to move a viewer from:-

<a href="#contact">Link text, say, Contact Details</a>

Place this code at the place in the html file that you want to show at the top of the window after the link has been clicked (say, just above your contact details code):-

<a id="contact"></a>

Or if you want to move someone from the page bottom to the top, place this code at the bottom in the html file (perhaps just before the </body> tag) that you want to move a viewer from:-

<a href="#top">back to top</a>

Place this code at the place in the html near the top, (perhaps just after the <body> tag), that you want to show at the top of the window after the link has been clicked:-

<a id="#top"></a>

You can link to h1 to h6 tags or a p tag or any other tag just by putting the id="..." inside the tag. Place this at the place you want to move from:-
<a href="#anchor">Sub-heading name</a>
and this where you want to move to:-
<h3 id="anchor">Sub-heading name</h3>

See examples on A basic webpage which show anchors from one part of a page to another on the same page.

If you want an anchor from one page to a place on another page, you will find an example on Two and three column layouts at the bottom of Containing divs which links to wide images on the Tables page. The code is:-
<a href="tables.html#tableswide">tables</a> at the place in the page with the link you want to move from and
<a id="tableswide"></a> at the place on the other page that you want the viewer to go to, or <h3 id="tableswide">Wide images</h3>, where the id is inside any element tag. You cannot place an anchor in a frame in this way, you will just be linked to the top of the main frameset page.

If you want to link to another website coded by you, to a place halfway down one of the pages, you can use an external url. Insert:- <a href="http://www.other-domain.com/tables.html#tableswide">Wide Tables</a> at the place you want to move from inserted as the link in the website you are coding and insert:- <a id="tableswide"></a> at the place you want the viewer to go to in your other website. Remember to include the http:// prefix of the url.

If the external website isn't under your control, you obviously can't insert the anchor in the code, but you can use a suitable id that is already there as the anchor. Look at the source code of the other website, find a unique id (say id="item4") for any tag like a p or h1 to h6 or any other tag that is just above the place where you would like your anchor, then use that for the link in your page:- <a href="http://www.another-site.com/page2.html#item4">Item 4</a>. If you can't find a suitable id in the other website page code, then you can't anchor to a place on the page, only to the top of the page using the page url without the #item4 after it.


Email addresses on the web

Don't put your email address on your webpages in its true form. Spammers use computer programs to harvest email addresses from millions of websites. There are five main ways to prevent your email address from being harvested. The first two are very simple and not recommended. The third is supposed to work but I haven't tested it. The fourth is not convenient for viewers with ActiveX/javascript disabled and if they use webmail (not having an email client) then they cannot use it. The fifth method using a PHP form is the best method for your own email address:-

  1. Type your email address rather than use a code that opens the viewer's email client. This has the main disadvantage that a viewer has to open an email client and re-type or copy and paste the address which is inconvenient.
  2. Use this format in your text editor:-
    <a href="mailto:change-this-to-jbloggs@hotmail.com">Email</a>
    The word Email is a link and when clicked the mailto code opens the default email client with the email address ready in the address window. It won't work because the email address is not the correct one but a viewer should notice that the address asks for it to be changed which is a simple deletion of the words "change-this-to-". This is also not a very user-friendly solution.
  3. Use this format in your text editor:-
    <a href="mailto:jbloggs&#64;hotmail.com">Email</a>
    &#64; is the character code for @ and it will appear as @ in the web page and the browser or email client will recognise it as @. I realise that spambots don't read a web page or click on a link; they read the page source code so they will read the &#64; instead of @. However, I can't understand why a spambot can't compute it as @ and use that to send an email. However, tutorials say that it does work, although any method shown here is not totally guaranteed.
  4. Use javascript to break the email address into two or more bits which are reassembled on the viewer's computer. Spammers' computers will either fail to take an address or harvest an invalid email address and although computer programs could be developed to deal with the javascript this is complicated and not worth the effort while so many uncoded email addresses are available.
    <script type="text/javascript">
    <!--
    // protected email script
    emailE='myname'
    emailE=(emailE + '@' + 'hotmail.com')
    document.write('<a href="mailto:' + emailE + ' ">' + ' Email me' + '</a>')
    //-->
    </script>
    <noscript>
    <p><i>Email address protected by JavaScript.
    Please enable JavaScript to contact me.</i></p>
    </noscript>

    where the words Email me will appear on the webpage and be a link to open the viewer's mail client. It breaks the email address into myname and @ and hotmail.com which is reassembled by document.write script on the viewer's computer and placed in the address bar of an email client when clicked. It is called a mung or munging of the email address - an acronym for "mash until no good".
    The code appears like this:- (if you have javascript enabled, otherwise you see the message in italics that javascript needs to be enabled).
     
    It is also possible to use an image instead of text as the link (but the image should have some text on it to identify the purpose of the link):-

    The code for the javascript email image link is:-
    <script type="text/javascript">
    <!--
    // protected email script
    email2='myname'
    email2=(email2 + '@' + 'hotmail.com')
    document.write('<a href="mailto:' + email2 + ' ">' + ' <img src="image.jpg"> ' + '</a>')
    //-->
    </script>
    <noscript>
    <p><i>Email address protected by JavaScript.
    Please enable JavaScript to contact me.</i></p>
    </noscript>
  5. Use a PHP form for your own email address; see Forms to send email without using viewer's email client.

If you want the emails that you receive to include a pre-inserted subject line (which the viewer can change but probably won't) then use the following code:-

<a href="mailto:your-name@hotmail.com?subject=Put the email subject here">Email me</a>


Validation (checking for errors)

It is important to validate your coding (check for errors). Both the sites listed below offer some comments relating to the correction of your errors. In some cases special scripts like Javascript cause errors to be raised which are not really errors, just part of the normal script.

You may use & and = which do not cause a problem for most browsers but the validator prefers the use of special character codes like &amp; and &#61;. Substitution of the special character codes in scripts may disable the script so check what effect the substitution has on the operation of the script.

Use W3C to validate your markup (html body code).

Use jigsaw.w3.org to validate your stylesheet code.

Character encoding when using utf-8

When you use utf-8 as the charset in the head section meta tag like:-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
the validator will raise errors like cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding) unless the character encoding is used.

Here are lists of special character codes:- tedmontgomery.com and Webpage Workshop.

For instance, this paragraph has characters with character encoding for:- " and ' which are usually only a problem if copied from Word, not generally if typed into Notepad and £ which always raises the error. It will happen with other characters.

Validating pages with javascript

Javascript uses a lot of & and = and semi-colons ; and these and other characters will cause the html validator to raise errors which you may not be able to substitute with the character encoding like &amp; and &#61; without breaking the javascript.

In these situations, especially with large sections of javascript, it's best to put the javascript in a separate javascript file. Open Notepad and enter the javascript code without the <script> and </script> tags and save it as javascript.js.

In the html file add a link, usually in the head section, to the javascript file:-
<script src="javascript.js" type="text/javascript"></script>
Place the code at the bottom of the file just before the </body> tag if the script is causing a delay in the page load.

The use of a separate javascript file will enable the html to be validated without the inclusion of javascript, but the javascript itself requires separate validation. There are specialist validators and some browsers like Firefox have an inbuilt javascript error checker. See Links for sites to validate javascript.


Folder (directory) structure

For advice on folder structure and code for linking between folders (often called directories when related to your host's server) see Basic Webpage

It is important to have files on the server in the same directory structure as folders on your computer as links in your html files to go up or down a level will not work online if the folders are not replicated. So make the main folder with your webpages on your computer equivalent to the first directory on the host's server and if you have sub-folders within your main folder, create sub-directories with the same names on the host's server.

You need an index.html file (or index.htm or index.php) in the first (or root) directory on the host's server. This is the default file that is opened when a viewer uses the root url of your website, ie www.mydomain.com or www.mydomain.com/ without specifying a filename after the .com/ like www.mydomain.com/homepage.html or www.mydomain.com/images/picture.jpg. So you may need to make the index.html your homepage, or just list links in it to your homepage and other pages.

You can also have an index.html file for any of your sub-directories so that if someone puts say www.mydomain.com/directory1 into a browser instead of naming a specific file he will be directed to an index file in that directory. You could have a list of items that are in that directory with links. If you do not have an index file host servers will usually show the viewer a file list of the directory which is clickable and so it allows a viewer access to all your files unless you have set up the host server not to display a file list.

You can also make the index.html file have an instant transfer to your homepage or any other page with a meta-refresh. Put this in the head:-
<meta http-equiv="refresh" content="0; URL=homepage.html">
The content="0; is the number of seconds before the transfer to the linked page. Note that there is no " after the number of seconds.

In the body of the index.html page just put a brief note that the viewer is being transferred to homepage.html in case the transfer is delayed or the homepage cannot be reached for some reason.


Uploading and FTP to your ISP's or host's server

ISP, hosting service and domain name

If you have your domain name and hosting service separate from your ISP these all have to be set up to talk to each other with DNS addresses and different usernames and passwords. It is preferable to have ISP, hosting and Domain name registration with three different companies so that if you have a problem with one and want to change, you do not lose or disrupt the other two services (it's especially important not to lose your domain name just because you want to change your ISP or hosting service).

Buy your domain name and buy your hosting service. The hosting service will give you two DNS numbers (addresses). Open your account at the domain name provider and use the menus to edit the DNS numbers from the temporary ones which relate to the domain name provider to the ones given to you by the hosting service. It then takes up to 72 hours (usually 36 to 48 hours) for these numbers to become active on the internet and for you to be able to see your website online. While waiting you can use ftp as described below to upload your files to the hosting service and you may be able to use a temporary url like https://90.120.154.216:2456 in your browser address bar instead of your domain like ftp://www.your-domain.com to log in to your hosting service control panel until the domain name is active.

FTP (uploading) to the host's server

There are three main ways to upload files to your host's server:-

Most ISPs offering free webspace have an "easy-upload" facility and File Manager with relatively simple instructions to upload files and to create a directory structure similar to the one on your computer. The domain name and hosting service is therefore under the control of your ISP and you will lose both if you change your ISP.

If you have a hosting service separate from your ISP your hosting service will provide the File Manager (like cPanel) but you have to have an FTP program to upload files to your host's server. FileZilla or CuteFTP are often recommended.

IE7 to IE9 have an ftp program built in which is perfectly suitable for uploading or downloading files singly or in batches although it lacks some other features provided by paid-for ftp programs. IE works in a strange way but is quite quick when you get used to it. IE needs ActiveX. You enter your domain name address with ftp instead of http like ftp://mydomain.com/ and ignore a window saying that it cannot display the webpage. You open "Page" in the top right IE menu bar and click "Open ftp site in Internet Explorer" (this only shows when you are trying to enter an ftp address), click OK in the popup, then right-click in the same place after the popup has disappeared which brings up a login popup and from there you get into your host server's directory file system. In IE9 the procedure is slightly different; after the "cannot display the webpage" you have to use View, Open FTP site in Windows Explorer but I expect you will find out how to do it.

You can often use IE's ftp program with free webspace from your ISP except that you enter something like ftp://ftp.supanet.com and carry on as above.

You have to use edit/copy and edit/paste when using IE's ftp program. Copying and pasting using the mouse right button or the menu bar icons does not work. Files can also be deleted using file/delete and new directories can be created.

If using IE6, enter your domain name address with ftp instead of http like ftp://mydomain.com/ and when you see the window saying that it cannot display the webpage; use File, login as, to access the server.


Notes

The stylesheet for this site which you will probably need to look at is here.

View/Source or View/Page Source in browser menu to see all html code.

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.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2006 updated 2024


top | Sitemap | Home | next

 

Google
web www.wickham43.net/