Where to Start

What does a Web developer have to know? W3Schools will answer this, and help you become a professional Web developer, well prepared for the future. For the beginner: Go to our Web Building Primer For the developer: Go to our Web Building Tutorial

HOME Web Primer

Web Primer
Every Web developer has to know the building blocks of the Web:

How the WWW works The HTML language The use of CSS (style sheets) JavaScript programming The XML standards Server Scripting technologies Managing data with SQL

WWW - The World Wide Web

The WWW is a network of computers all over the world. The WWW is most often called the Web. The computers on the Web communicate using standard protocols and languages. The W3C (The World Wide Web Consortium) are making the rules and standards for the Web.

HTML - The Language of the Web

HTML is the language of the Web, and every Web developer should have a basic understanding of it. With HTML you use "markup tags" to define the content and layout of your Web pages. The HTML tag <h1> defines a primary header, and <p> defines a paragraph.

CSS - Cascading Style Sheets

Styles define how HTML elements are displayed, just like the <font> tag in older HTML. When styles are saved in external files, you can change the style and appearance of all the HTML pages in your Web, just by changing your CSS document. If you have ever tried to change the font or color of all the headings in all your Web pages, you will understand how CSS can save a lot of work.

JavaScript - Client Side Scripting

JavaScript is used for client-side scripting. Client-side scripting is about "programming" the Web browser. To be able to deliver more dynamic web site content, you should teach yourself JavaScript. A JavaScript statement like this: document.write("<p>" + date + "</p>") can write a variable text into an HTML page.

XML - Extensible Markup Language

XML is not a replacement for HTML. XML is used to describe and transport data, while HTML is used to display data. XML and a number of different XML standards are rapidly becoming the most common tools for data transmission, data storing, and data manipulation.

Server Side Scripting

Server-side scripting is about "programming" the Web server. To be able to deliver more dynamic web site content, you should teach yourself server-side scripting. With server-side scripting, you can (amongst many other things) access databases and return the results to a browser.

Managing Web Data with SQL

The Structured Query Language (SQL) is the common standard for accessing databases such as SQL Server, Oracle, Sybase, and Access. Any webmaster should know that SQL is the true engine for interacting with databases on the Web.

Web WWW

WWW Primer
What is the WWW? How does it work? What is a browser? What is a server?

What is the WWW?

WWW stands for the World Wide Web The World Wide Web is most often called the Web The Web is a network of computers all over the world All the computers in the Web can communicate with each other All the computers use a communication standard called HTTP

How Does the WWW Work?

Web information is stored in documents called Web pages Web pages are files stored on computers called Web servers Computers reading the Web pages are called Web clients Web clients view the pages with a program called a Web browser Popular browsers are Internet Explorer and Mozilla Firefox

How Does the Browser Fetch the Pages?

A browser fetches a Web page from a server by a request

A request is a standard HTTP request containing a page address A page address looks like: http://www.someone.com/page.htm

How Does the Browser Display the Pages?

All Web pages contain instructions on how to be displayed The browser displays the page by reading these instructions The most common display instructions are called HTML tags The HTML tag for a paragraph looks like this: </p> A paragraph in HTML is defined like this <p>This is a Paragraph</p>

Who is Making the Web Standards?

The Web standards are not made up by Netscape or Microsoft The rule-making body of the Web is the W3C W3C stands for the World Wide Web Consortium W3C puts together specifications for Web standards The most essential Web standards are HTML, CSS and XML The latest HTML standard is XHTML 1.0

To learn more about W3C, study our W3C Tutorial.

Web HTML

HTML Primer
What is an HTML File?

HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor

Do You Want to Try It?

If you are running Windows, start Notepad. If you are on a Mac, start SimpleText. In OSX start TextEdit and change the following preferences: Open the the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above! Type in the following text:
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>

Save the file as "mypage.htm". Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.

Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions. With newer software we think it will be perfectly safe to use .html.

Note on HTML Editors:

You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file. However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.

Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the result in my browser. Why? A: Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm". Also make sure that you use the same name when you open the file in your browser. Q: I have tried to edit an HTML file but the changes don't show in the browser. Why? A: The browser caches your pages so it doesn't have to read the same page twice. When you have changed a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to read the edited page. Q: What browser should I use? A: You can do all the training with all of the common browsers, like Internet Explorer, Mozilla, Netscape, or Opera. However, some of the examples in our advanced classes require the latest versions of the browsers. Q: Does my computer have to run Windows? What about a Mac? A: You can do all your training on a non-Windows computer like a Mac. However, some of the examples in our advanced classes require a newer version of Windows, like Windows 98 or Windows 2000.

HTML Tutorials

Study our HTML QuickStart Study our Complete HTML Tutorial

Web CSS

CSS Primer
What is CSS?

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Internal and external style sheets will Cascade into one

CSS Demo
With CSS, your HTML documents can be displayed using different output styles: See how it works

Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0. All major browsers support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document! CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

CSS Tutorials
Study our CSS QuickStart Study our Complete CSS tutorial.

Web JavaScript

JavaScript Primer
An HTML file can contain text, HTML tags and scripts. Scripts in an HTML file can be executed by the browser.

What is JavaScript?

JavaScript is a scripting language A scripting language is a lightweight programming language A JavaScript is lines of executable computer code A JavaScript is usually embedded directly into HTML pages

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. JavaScript is the most popular scripting language on the internet, and works in all major browsers.

Client-Side Scripting
JavaScript is about "programming" the behavior of the browser. This is called client-side scripting or browser scripting. Server-side scripting is about "programming" the behavior of the server (see Web Scripting chapter).

JavaScript gives HTML designers a programming tool

HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages.

JavaScript can put dynamic text into an HTML page

A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page.

JavaScript can react to events

A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.

JavaScript can read and write HTML elements

A JavaScript can read and change the content of an HTML element.

JavaScript can be used to validate data

A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing.

How to Put JavaScript Into an HTML Page

The HTML <script> tag is used to insert a JavaScript into an HTML page:
<html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

The code above will produce this output: Hello World! Example Explained To insert a script in an HTML page, we use the <script> tag. The type attribute defines the scripting language:
<script type="text/javascript">

Then the JavaScript starts: The JavaScript command for writing some output to a page is document.write
document.write("Hello World!")

Then the <script> tag has to be closed

</script>

Try-It-Yourself Examples
Write text How to write text on a page. Write text with formatting How to format the text on your page with HTML tags.

JavaScript Tutorials
Study our JavaScript QuickStart Study our Complete JavaScript tutorial.

Web XML

XML Primer
XML was designed to describe data and to focus on what data is. HTML was designed to display data and to focus on how data looks.

What is XML?

XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to describe data XML tags are not predefined. You must define your own tags XML uses a Document Type Definition (DTD) or an XML Schema to describe the data XML with a DTD or XML Schema is designed to be self-descriptive XML is a W3C Recommendation

The Main Difference between XML and HTML

XML was designed to carry data. XML is not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to describe data and to focus on what data is. HTML was designed to display data and to focus on how data looks. HTML is about displaying information, while XML is about describing information.

XML Does not DO Anything

XML was not designed to DO anything. Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store and to send information. The following example is a note to Tove from Jani, stored as XML:

<note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

The note has a header and a message body. It also has sender and receiver information. But still, this XML document does not DO anything. It is just pure information wrapped in XML tags. Someone must write a piece of software to send, receive or display it.

XML is Free and Extensible

XML tags are not predefined. You must "invent" your own tags. The tags used to mark up HTML documents and the structure of HTML documents are predefined. The author of HTML documents can only use tags that are defined in the HTML standard (like <p>, <h1>, etc.). XML allows the author to define his own tags and his own document structure. The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are "invented" by the author of the XML document.

XML is a Complement to HTML

XML is not a replacement for HTML. It is important to understand that XML is not a replacement for HTML. In future Web development it is most likely that XML will be used to describe the data, while HTML will be used to format and display the same data. My best description of XML is this: XML is a cross-platform, software and hardware independent tool for transmitting information.

XML in Future Web Development

XML is going to be everywhere.

We have been participating in XML development since its creation. It has been amazing to see how quickly the XML standard has been developed and how quickly a large number of software vendors have adopted the standard. We strongly believe that XML will be as important to the future of the Web as HTML has been to the foundation of the Web and that XML will be the most common tool for all data manipulation and data transmission.

XML Tutorial
Study our Complete XML Tutorial

Web Scripting

Server-side Scripting Primer

An HTML file can contain text, HTML tags and scripts. Scripts in an HTML file can be executed on the Web server

Server-side Scripting
Server-side scripting is about "programming" the behavior of the server. This is called server-side scripting or server scripting. Client-side scripting is about "programming" the behavior of the browser. (see Web JavaScript chapter).

What is Server-side Scripting?

Normally when a browser requests an HTML file, the server returns the file, but if the file contains a server side script, the script inside the HTML file is executed by the server before the file is returned to the browser as plain HTML.

What can Server Scripts Do?

Dynamically edit, change or add any content of a Web page Respond to user queries or data submitted from HTML forms Access any data or databases and return the results to a browser Customize a Web page to make it more useful for individual users Provide security since your server code cannot be viewed from the browser

Important: Because the scripts are executed on the server, the browser that displays the ASP file does not need to support scripting at all!

ASP and PHP

At W3Schools we demonstrate server-side scripting by using Active Server Pages (ASP) and Hypertext Preprocessor (PHP). You cannot view the ASP or PHP source code by selecting "View source" in a browser, you will only see the output from the server, which is plain HTML. This is because the scripts are executed on the server before the result is sent back to the browser as plain HTML. However, the examples below display the hidden source code. This will make it easier for you to understand how it works.

ASP Examples
Write text with ASP How to write text with ASP. Add some HTML to the text How to format the text with HTML tags.

Scripting Tutorials
Study our Complete ASP tutorial, or our Complete PHP tutorial.

Web SQL

SQL Primer
SQL is a standard computer language for accessing and manipulating databases.

Managing Data with SQL

The Structured Query Language (SQL) is the standard language for accessing databases such as SQL Server, Oracle, MySQL, Sybase, and Access. Knowledge of SQL is invaluable for anyone wanting to store or retrieve data from a database.

What is SQL?

SQL stands for Structured Query Language SQL allows you to access a database SQL is an ANSI standard computer language SQL can execute queries against a database SQL can retrieve data from a database SQL can insert new records in a database SQL can delete records from a database SQL can update records in a database SQL is easy to learn

SQL is a Standard - BUT....

SQL is an ANSI (American National Standards Institute) standard computer language for accessing and manipulating database systems. SQL statements are used to retrieve and update data in a database. SQL works with database programs like MS Access, DB2, Informix, MS SQL Server, Oracle, Sybase, etc. Unfortunately, there are many different versions of the SQL language, but to be in compliance with the ANSI standard, they must support the same major keywords in a similar manner (such as SELECT, UPDATE, DELETE, INSERT, WHERE, and others).

Note: Most of the SQL database programs also have their own proprietary extensions in addition to the SQL standard!

SQL Database Tables

A database most often contains one or more tables. Each table is identified by a name (e.g. "Customers" or "Orders"). Tables contain records (rows) with data. Below is an example of a table called "Persons": LastName Hansen Svendson Pettersen FirstName Ola Tove Kari Address Timoteivn 10 Borgvn 23 Storgt 20 City Sandnes Sandnes Stavanger

The table above contains three records (one for each person) and four columns (LastName, FirstName, Address, and City).

SQL Queries
With SQL, we can query a database and have a result set returned. A query like this:
SELECT LastName FROM Persons

Gives a result set like this: LastName Hansen Svendson Pettersen Note: Some database systems require a semicolon at the end of the SQL statement. We don't use the semicolon in our tutorials.

SQL Data Manipulation Language (DML)

SQL (Structured Query Language) is a syntax for executing queries. But the SQL language also includes a syntax to update, insert, and delete records. These query and update commands together form the Data Manipulation Language (DML) part of SQL:

SELECT - extracts data from a database table UPDATE - updates data in a database table DELETE - deletes data from a database table INSERT INTO - inserts new data into a database table

SQL Data Definition Language (DDL)

The Data Definition Language (DDL) part of SQL permits database tables to be created or deleted. We can also define indexes (keys), specify links between tables, and impose constraints between database tables. The most important DDL statements in SQL are:

CREATE TABLE - creates a new database table ALTER TABLE - alters (changes) a database table DROP TABLE - deletes a database table CREATE INDEX - creates an index (search key) DROP INDEX - deletes an index

SQL Tutorial
Study our Complete SQL tutorial.

HOME Web Building

Web Building
Every Web developer has to know the building blocks of the Web:

HTML 4.01 The use of CSS (style sheets) XHTML XML and XSLT Client side scripting Server side scripting Managing data with SQL

The future of the Web

HTML 4.01
HTML is the language of the Web, and every Web developer should have a basic understanding of it. HTML 4.01 is an important Web standard. and very different from HTML 3.2. When tags like <font> and color attributes were added to HTML 3.2, it started a developer's nightmare. Development of web sites where font information must be added to every single Web page is a long and expensive pain. With HTML 4.01 all formatting can be moved out of the HTML document and into a separate style sheet. HTML 4.01 is also important because XHTML 1.0 (the latest HTML standard) is HTML 4.01 "reformulated" as an XML application. Using HTML 4.01 in your pages makes the future upgrade from HTML to XHTML a very simple process. Make sure you use the latest HTML 4.01 standard. Study our Complete HTML 4.01 reference.

Cascading Style Sheets (CSS)

Styles define how HTML elements are displayed, just like the font tag in HTML 3.2. Styles are normally saved in files external to HTML documents. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing a single CSS document. If you have ever tried changing something like the font or color of all the headings in all your Web pages, you will understand how CSS can save you a lot of work. Make sure you study our CSS tutorial.

XHTML - The Future of HTML

XHTML stands for Extensible HyperText Markup Language. XHTML 1.0 is now the latest HTML standard from W3C. It became an official Recommendation January 26, 2000. A W3C Recommendation means that the specification is stable and that the specification is now a Web standard.

XHTML is a reformulation of HTML 4.01 in XML and can be put to immediate use with existing browsers by following a few simple guidelines. To prepare for the future: Read how this site was converted to XHTML.

XML - A Tool for Describing Data

The Extensible Markup Language (XML) is NOT a replacement for HTML. In future Web development, XML will be used to describe and carry the data, while HTML will be used to display the data. Our best description of XML is as a cross-platform, software- and hardware-independent tool for storing and transmitting information. We believe that XML is as important to the Web as HTML was to the foundation of the Web and that XML will be the most common tool for all data manipulation and data transmission. Make sure you study our XML tutorial.

XSLT - A Tool for Transforming Data

XSLT (Extensible Stylesheet Language Transformations) is a language for transforming XML. Future Web sites will have to deliver data in different formats, to different browsers, and to other Web servers. To transform XML data into different formats, XSLT is the new W3C standard. XSLT can transform an XML file into a format that is recognizable to a browser. One such format is HTML. Another format is WML - the mark-up language used in many handheld devices. XSLT can also add elements, remove, rearrange and sort elements, test and make decisions about which elements to display, and a lot more. Make sure you study our XSLT tutorial.

Client-Side Scripting
Client-side scripting is about "programming" the behavior of an Internet browser. To be able to deliver more dynamic web site content, you should teach yourself JavaScript:

JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages.

JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page. JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element. JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element. JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server, this will save the server from extra processing.

Make sure you study our JavaScript Tutorial.

Server-Side Scripting
Server-side scripting is about "programming" an Internet server. To be able to deliver more dynamic web site content, you should teach yourself server-side scripting. With server-side scripting, you can:

Dynamically edit, change, or add any content of a Web page Respond to user queries or data submitted from HTML forms Access any data or databases and return the results to a browser Access any files or XML data and return the results to a browser Transform XML data to HTML data and return the results to a browser Customize a Web page to make it more useful for individual users Provide security and access control to different Web pages Tailor your output to different types of browsers Minimize the network traffic

At W3Schools we demonstrate server-side scripting by using Active Server Pages (ASP) and PHP: Hypertext Preprocessor (PHP). Make sure you study our ASP tutorial or our PHP tutorial.

Managing Data with SQL

The Structured Query Language (SQL) is the common standard for accessing databases such as SQL Server, Oracle, Sybase, and Access. Knowledge of SQL is invaluable for anyone wanting to store or retrieve data from a database. Any webmaster should know that SQL is the true engine for interacting with databases on the Web. Make sure you study our SQL tutorial.

What Will the Future Bring?

One important thing to know is that the functionality of Web Sites will change very drastically. We will see a huge shift from sites displaying "static content" to data driven sites delivering "dynamic content". We will also see a lot of new browsers, like the browsers found in mobile devices, and we will see a lot more use of XML to communicate data between servers, and between servers and browsers.

Web Design

Web Site Design

Designing Web sites needs careful thinking and a lot of planning. The most important thing is to KNOW YOUR AUDIENCE.

Users Are Scanners

If you think a typical user will read the entire content of your Web pages, you are wrong. No matter how much useful information you put into a Web page, a visitor will only spend a few seconds scanning it before they decide whether to leave it or to stay. If you want a visitor to read your text, be sure to make your point in the very first sentence of the page. After that you should try to keep them occupied with short paragraphs and interesting new headers all the way down the page.

Less Is More
Try to keep all sentences as short as possible. Try to keep your paragraphs as short as possible. Try to keep your chapters as short as possible. Try to keep your pages as short as possible. Use a lot of space between your paragraphs and chapters. Pages overloaded with text will kill your audience. Don't place too much content on a single page. If you have a lot to say, try to break your information into smaller chunks and place it on different pages. Don't expect any visitor to scroll all the way down to the bottom of a page with thousands of words.

Navigation
Try to create a navigation structure that is common for all the pages in your Web. Keep the use of hyperlinks inside your text paragraphs to a minimum. Don't use hyperlinks inside text paragraphs to send your visitors to every random page of your Web. That will destroy the feeling of a consistent navigation structure. If you must use hyperlinks, add them to the bottom of a paragraph or to the navigation menus of your site.

Download Speed
A common mistake made by many web designers is to develop a site on a local machine with direct access to the data, or to develop the site over a high-speed Internet connection. Sometimes developers are not aware of the fact that some of their pages take a long time to download. Internet usability studies tell us that most visitors will leave a Web page that takes more than 7 seconds to download. Before you publish any content heavy pages, make sure they are tested over a low-speed modem connection. If your pages take a long time to download, you might consider removing some of your graphic or multimedia content.

Let Your Audience Speak!

Feedback from your users is a very good thing. Your visitors are your "customers". Very often they will give you some valuable wisdom, or advise you, completely free of charge, about what you could have done better. If you provide a simple way to reach you, you will get a lot of positive input from a lot of people with different skills and knowledge.

Web Users

Web Site Users

Your users will use different hardware and software. The important thing is to KNOW YOUR AUDIENCE.

What Monitors Do They Have?

Remember that not everyone on the Web has the same monitor as you have. If you design your Web pages to be displayed on a monitor with a 1024x768 resolution, some of your visitors with lower resolution monitors (like 640x480) might have problems reading your pages. Some users still have low resolution 640x480 monitors, but the trend is moving towards 800x600 as the low resolution standard. This Web site is designed to be best viewed on 800x600 or better resolution. If you are one of those developers with a sophisticated monitor (1600x1200?), make sure you test the display of your Web pages on different monitors with lower resolutions. One wise thing to do when designing the layout of Web pages is to let a section of each page be of variable size to fit the size of a large or small resolution monitor. Take a look at our browser statistics to see the trends in monitor development.

What Browsers Do They Use?

Both of the two major Internet browsers (Netscape and Microsoft) have their own specialties and quirks that you must consider when designing your Web pages. If you are serious about your Web site, don't forget to test every page with different types of browsers. The most popular browsers today are Microsoft Internet Explorer and Mozilla Firefox. Additionally, some of your visitors might use text only browsers, such as Lynx, or they might visit your site from an online service like AOL, CompuServe or Prodigy. Some of these browsers might not display your Web pages as well as you think. One wise thing to do when designing Web pages is to use strict, formal and correct HTML (or XHTML). Strict and correct coding will always help a browser to display your pages correctly. Take a look at our browser statistics to see the trends in browser development.

What Plug-Ins Do They Have?

Some elements in your Web pages, like sound and video clips or other multimedia content, might require the use of separate programs (helper applications or plug-ins). Don't use such elements in your Web pages unless you are sure that your visitors have access to the software needed to view them.

What About Disabilities?

Some people have serious viewing or hearing disabilities. These users might want to visit your Web site. Some of them will try to read your pages with Braille or speech-based browsers. Remember that all of your visible content is lost if you don't provide them with some text based alternatives for pictures and other graphic elements. Designing Web pages for people with disabilities is not an easy thing, but one small thing you can do - at least for people with poor eyesight - is to let your pages use a resizable font size. (Have you ever tried to change the text size while browsing W3Schools?)

Web Standards

Web Standards
Web Standards will help us fulfill the WWW dream. Web Standards make Web Development easier.

Why Web Standards?

Web developers are often struggling with time-consuming double-coding to solve problems with different browsers versions. This situation will get much worse when new hardware (like mobile telephones and other handheld devices) and new software (like micro-browsers) start browsing the Web. To make the Web a better place, for both developers and end-users, it is of paramount importance that both browser vendors and site developers follow standards when they develop new applications.

With its tremendous growth, the Web needs standards to realize its full potential. Web standards ensure that everyone has access to the same information. Future use of the Web, including applications that we only dream of today, will not be possible without world wide standards. Web standards also make site development faster and more enjoyable. Future Web sites will have to be coded according to standards to shorten both development and maintenance time. Developers should not have to struggle with several versions of code to accomplish the same result.

Other Considerations
When Web developers follow Web standards, web development teamwork is simplified, since it is easier for the developers to understand each other's coding. Some developers think that standards are the same as restrictions, and that taking advantage of nice browser-specific features will add credit to their work. But future adjustments to these Web pages will become more and more difficult as the variety of access methods increases. Following standards is your first step to solve this problem. Using only Web standards will help you to ensure that all browsers, old and new, will display your site properly, without frequent and time-consuming rewrites. Standardization can increase the access to your site. Does it make sense to limit your audience to only those with a particular browser? Standard Web documents are easier for search engines to access, and easier to index more accurately. Standard Web documents are easier to convert to other formats. Standard Web documents are easier to access with program code (like JavaScript and the DOM). Want to save yourself a lot of time? Make a habit of validating your pages with a validation service. Validation keeps your documents up to the standards and free of nasty errors.

Accessibility
Accessibility is an important part of the HTML standard. Standards make it easier for people with disabilities to use the Web. Blind people can use computers that read Web pages for them. People with poor sight can rearrange and magnify standard Web pages. Simple Web standards like HTML 4 and CSS, will make your Web pages much easier to understand by special devices like voice browsers, or other unusual output devices.

The World Wide Web Consortium

The World Wide Web Consortium (W3C), founded in 1994, is an international consortium dedicated to "lead the Web to its full potential". As developers, especially when creating educational Web sites, we can help them turn this dream into reality. You can read more about W3C in the next chapter.

ECMA
The European Computer Manufacturers Association (ECMA) , based in Switzerland, was founded in 1961 in order to meet the need for standardizing computer languages and input/output codes. ECMA is not an official standardization institute, but an association of companies that collaborate with other official institutes like the International Organization for Standardization (ISO) and the European Telecommunications Standards Institute (ETSI). To Web developers, the most important standard is ECMAScript, the standardization of JavaScript. ECMAScript is a standardized scripting language to manipulate Web page objects specified by the W3C Document Object Model (DOM). With ECMAScript, DOM objects can then be added, deleted, or changed. The ECMAScript standard is based on Netscape's JavaScript and Microsoft's JScript. The latest ECMAScript specification is ECMA-262: http://www.ecma-international.org/publications/standards/ECMA-262.HTM

Web Validation

Web Page Validation

Validate your HTML files with W3C
Input the address of the page you want to validate in the box below:
http://www.w3schools.com/site/html.htm

Validate the page

Validate your CSS files with W3C

Input the address of the css file that you want to validate in the box below:
http://www.w3schools.com/stdtheme.css Validate the page

Validate your XHTML files with W3C

An XHTML document is validated against a Document Type Definition (DTD). You can read more about XHTML validation in our XHTML tutorial. Input the address of the page you want to validate in the box below:
http://www.w3schools.com/xhtml/default.asp Validate the page

Validate your XML files with Internet Explorer

Input the address of the page you want to validate in the box below:
http://www.w3schools.com/dom/note.xml Validate the page

Validate your WML files with Internet Explorer

Input the address of the page you want to validate in the box below:
http://www.w3schools.com/wap/demo_a.wml Validate the page

Web W3C

The World Wide Web Consortium

The World Wide Web Consortium (W3C) creates the WWW standards. W3C's mission is to lead the Web to its full potential, which it does by developing specifications, guidelines, software, and tools.

The World Wide Web Consortium

From Tim Berners-Lee, the inventor of the World Wide Web, director and founder of the World Wide Web consortium:

"The dream behind the Web is of a common information space in which we communicate by sharing information."

The World Wide Web Consortium (W3C), founded in 1994, is an international consortium dedicated to "lead the Web to its full potential". W3C Stands for the World Wide Web Consortium W3C was created in October 1994 W3C was created by Tim Berners-Lee W3C was created by the Inventor of the Web W3C is organized as a Member Organization W3C is working to Standardize the Web W3C creates and maintains WWW Standards W3C Standards are called W3C Recommendations The most important work done by the W3C is the development of Web specifications (called "Recommendations") that describe communication protocols (like HTML and XML) and other building blocks of the Web. As developers, especially when creating educational Web sites, we can help turn this dream into reality. The most important W3C standards are: HTML XHTML CSS XML XSL DOM You can read more about W3C in our W3C tutorial.

W3C Resources at W3Schools

Introduction to W3C This section explains what the W3C is, how it works, and how the Web is standardized. W3C Process The W3C standards approval process includes up to 7 different steps. This section explains the W3C standardizing process. W3C HTML HTML is the lingua franca for publishing hypertext on the World Wide Web. This section summarizes the HTML activities at the W3C. W3C XHTML XHTML 1.0 is the latest version of HTML. This section summarizes the XHTML activities at the W3C. W3C XML XML was designed to describe, store, carry and exchange data. XML 1.0 is the latest version of XML. This section summarizes the XML activities at the W3C. W3C CSS Style sheets describe how documents are displayed, pronounced, or printed. W3C supports two types of style sheets: CSS and XSL. This section summarizes the CSS activities at the W3C. W3C XSL Style sheets describe how documents are displayed, pronounced, or printed. W3C supports two types of style sheets: CSS and XSL. This section summarizes the XSL activities at the W3C. W3C DOM The Document Object Model (DOM) is a platform and language neutral Application Programming Interface (API) that allows programs to access and update the content, structure, and style of a document. This section summarizes the DOM activities at the W3C. W3C Other This section summarizes some other important and interesting activities at W3C.

Web Security

Web Security
You are offering your IP address to the entire world at this very moment.

Make sure you are not offering access to your private data at the same time.

YOUR IP ADDRESS IS PUBLIC

Accessing the Internet is a security risk. When you are connected to the Internet, an IP address is used to identify your PC. If you don't protect yourself, this IP address can be used to access your computer from the outside world. A fixed IP address is a larger security risk. If you're using a modem with a dial-up connection, you will get a new IP address every time you connect to Internet, but if you have a fixed Internet connection (cable, ADSL, fixed line), your IP address will never change. If you have a fixed IP address, you give potential Internet crackers all the time they need to search for entrances to your computer, and to store and share (with other crackers) information they might find about your unprotected private data.

Your Network Shares

Personal computers are often connected to a shared network. Personal computers in large companies are connected to large corporate networks. Personal computers in small companies are connected to a small local network, and computers in private homes often share a network between family members. Most often networks are used to share resources like printers, files and disk storage. When you are connected to the Internet, your shared resources can be accessed by the rest of the world.

A Common Windows Security Problem

Unfortunately, many Microsoft Windows users are unaware of a common security leak in their network settings. This is a common setup for network computers in Microsoft Windows: Client for Microsoft Networks File and Printer Sharing for Microsoft Networks NetBEUI Protocol

Internet Protocol TCP/IP If your setup allows NetBIOS over TCP/IP, you have a security problem: Your files can be shared all over the Internet Your logon-name, computer-name, and workgroup-name are visible to others. If your setup allows File and Printer Sharing over TCP/IP, you also have a problem: Your files can be shared all over the Internet Computers that are not connected to any network can also have dangerous network settings because the network settings were changed when Internet was installed.

Solving the Problem

For Windows 2000 users: You can solve your security problem by disabling NetBIOS over TCP/IP: Open Windows Explorer Right-click on My Network Places Select: Properties Right-click on Local Area Network Select: Properties Select: Internet Protocol TCP/IP Click on Properties Click on Advanced Select the WINS tab Select Disable NetBIOS over TCP/IP Click OK If you get the message: "This connection has an empty......", ignore the message and click on YES to continue, and click OK to close the other setup windows. You should restart your computer after the changes. For Windows 95, 98, or ME users: You can solve your security problem by disabling NetBIOS over TCP/IP: Open Windows Explorer Right-click on My Network Places Select: Properties Select: Internet Protocol TCP/IP Click on Properties Select the NetBIOS tab Uncheck: Enable NetBIOS over TCP/IP

Click OK You must also disable the TCP/IP Bindings to Client for Microsoft Networks and File and Printer Sharing: Open Windows Explorer Right-click on My Network Places Select: Properties Select: Internet Protocol TCP/IP Click on Properties Select the Bindings tab Uncheck: Client for Microsoft Networks Uncheck: File and Printer Sharing Click OK If you get a message with something like: "You must select a driver.........", ignore the message and click on YES to continue, and click OK to close the other setup windows. If you still want to share your Files and Printer over the network, you must use the NetBEUI protocol instead of the TCP/IP protocol. Make sure you have enabled it for your local network: Open Windows Explorer Right-click on My Network Places Select: Properties Select: NetBEUI Click on Properties Select the Bindings tab Check: Client for Microsoft Networks Check: File and Printer Sharing Click OK You should restart your computer after the changes.

Protect Your Server

iisPROTECT provides a complete range of password protection, authentication and user management solutions: iisPROTECTasp: Protect areas of your web site and require username and password. Grant/deny any users/groups on a per resource basis. Extensive Web Interface for user/group admin, use any DB backend, store custom data, set user start/end dates, email users, audit logins. iisPROTECT: Protect all web site files including images, databases,html,ASP etc. Protect entire directories, users / groups independent from Windows accounts, complete web administration, does not require cookies or any programming. Complete turn key solution.

iisPROTECTquota: All of the features of iisPROTECT plus: prevent concurrent logins and password cracking attempts, set quotas on hits, logins, kb per user. Read more about iisPROTECT.

Web Glossary

Web Glossary
This is an alphabetical list of Web Building Glossary Terms. Access (Microsoft Access) A database system developed by Microsoft. Part of Microsoft Office Professional. Mostly used on low traffic web sites running on the Windows platform. ActiveMovie A web technology for streaming movies from a web server to a web client. Developed by Microsoft. ActiveX A programming interface (API) that allows web browsers to download and execute Windows programs. (See also Plug-In) Address See Web Address. Anchor In web terms: The starting point or ending point of a hyperlink. Learn more about links in our HTML tutorial Anonymous FTP See FTP Server. ANSI (American National Standards Institute) An organization that creates standards for the computer industry. Responsible for the ANSI C standard. ANSI C An international standard for the C programming language. ADO (ActiveX Data Object) A Microsoft technology that provides data access to any kind of data store. Learn more about ADO in our ADO tutorial

ADSL (Asymmetric Digital Subscriber Line) A special type of DSL line where the upload speed is different from the download speed. Amaya An open source web browser editor from W3C, used to push leading-edge ideas in browser design. Animation A set of pictures simulating movement when played in series. Anti-Virus Program A computer program made to discover and destroy all types of computer viruses. Apache An open source web server. Mostly for Unix, Linux and Solaris platforms. Applet See web applet. Archie A computer program to locate files on public FTP servers. API (Application Programming Interface) An interface for letting a program communicate with another program. In web terms: An interface for letting web browsers or web servers communicate with other programs. (See also Active-X and PlugIn) ARPAnet The experimental network tested in the 1970's which started the development of the Internet. Authentication In web terms: the method used to verify the identity of a user, program or computer on the web. ASCII (American Standard Code for Information Interchange) A set of 128 alphanumeric and special control characters used for computer storing and printing of text. Used by HTML when transmitting data over the web. See the full list of ASCII codes in our HTML Reference ASF (Advanced Streaming Format) A multimedia streaming format. Developed by Microsoft for Windows Media. ASP (Active Server Pages) A Microsoft technology allowing the insertion of server executable scripts in web pages. Learn more about ASP in our ASP tutorial ASX (ASF Streaming Redirector) An XML format for storing information about ASF files. Developed by Microsoft for Windows Media.

AVI (Audio Video Interleave) File format for video files. Video compression technology developed by Microsoft. Banner Ad A (most often graphic) advertisement placed on a web page, which acts as a hyperlink to an advertiser's web site. Bandwidth A measure for the speed (amount of data) you can send through an Internet connection. The more bandwidth, the faster the connection. Baud The number of symbols per second sent over a channel. BBS (Bulletin Board System) A web based public system for sharing discussions, files, and announcements. Binary Data Data in machine readable form. Bit (Binary Digit) The smallest unit of data stored in a computer. A bit can have the value of 0 or 1. A computer uses 8 bits to store one text character. BMP (Bitmap) A format for storing images. Bookmark In web terms: A link to a particular web site, stored (bookmarked) by a web user for future use and easy access. Browse Term to describe a user's movement across the web, moving from page to page via hyperlinks, using a web browser. (See Web Browser). BPS (Bits Per Second) Term to describe the transmission speed for data over the web. Browser See Web Browser. Byte (Binary Term) A computer storage unit containing 8 bits. Each byte can store one text character. C An advanced programming language used for programming advanced computer applications.

C++ (C Plus Plus) The same as C with added object-oriented functions. C# (C Sharp) A Microsoft version of C++ with added Java-like functions. Case Sensitive A term used to describe if it is of importance to use upper or lower case letters. Cache In web terms: A web browser or web server feature which stores copies of web pages on a computer's hard disk. Chat An on-line text-based communication between Internet users. CGI (Common Gateway Interface) A set of rules that describes how a CGI program communicates with a web server. CGI Bin The folder (or directory) on a web server that stores CGI programs. CGI Program A small program that handles input and output from a web server. Often CGI programs are used for handling forms input or database queries. Cinepac A codec for computer video. Client See Web Client. Client/Server In web terms: The communication and separation of workload between a web client and a web server. Click In web terms: A mouse click on a hyperlink element (such as text or picture) on a web page which creates an event such as taking a visitor to another web page or another part of the same page. Clickthrough Rate The number of times visitors click on a hyperlink (or advertisement) on a page, as a percentage of the number of times the page has been displayed. Codec (Compressor / Decompressor) Common term for the technology used for compressing and decompressing data.

Communication Protocol A standard (language and a set of rules) to allow computers to interact in a standard way. Examples are IP, FTP, and HTTP. Learn more about Communication Protocols in our TCP/IP tutorial Compression A method of reducing the size (compress) of web documents or graphics for faster delivery via the web. Computer Virus A computer program that can harm a computer by displaying messages, deleting files, or even destroying the computer's operating system. Cookie Information from a web server, stored on your computer by your web browser. The purpose of a cookie is to provide information about your visit to the website for use by the server during a later visit. ColdFusion Web development software for most platforms (Linux, Unix, Solaris and Windows). CSS (Cascading Style Sheets) A W3C recommended language for defining style (such as font, size, color, spacing, etc.) for web documents. Learn more about CSS in our CSS tutorial Database Data stored in a computer in such a way that a computer program can easily retrieve and manipulate the data. Learn more about databases in our SQL tutorial Database System A computer program (like MS Access, Oracle, and MySQL) for manipulating data in a database. DB2 A database system from IBM. Mostly for Unix and Solaris platforms. DBA (Data Base Administrator) The person (or the software) who administers a database. Typical task are: backup, maintenance and implementation. DHCP (Dynamic Host Configuration Protocol) An Internet standard protocol that assigns new IP addresses to users as need.

DHTML (Dynamic HTML) A term commonly to describe HTML content that can change dynamically. Learn more about DHTML in our DHTML tutorial Dial-up Connection In web terms: A connection to Internet via telephone and modem. Discussion Group See Newsgroup. DNS (Domain Name Service) A computer program running on a web server, translating domain names into IP addresses. Learn more about DNS in our Web Hosting tutorial DNS Server A web server running DNS. DOM (Document Object Model) A programming model for web page objects. (See HTML DOM and XML DOM) Domain Name The name that identifies a web site. (like: W3Schools.com) Learn more about domains in our Web Hosting tutorial DOS (Disk Operating System) A general disk based computer operating system (see OS). Originally developed by Microsoft for IBM personal computers. Often used as a shorthand for MS-DOS. Download To transfer a file from a remote computer to a local computer. In web terms: to transfer a file from a web server to a web client. (see also Upload). DSL (Digital Subscriber Line) An Internet connection over regular telephone lines, but much faster. Speed may vary from 128 kilobit per second, up to 9 megabit per second. DTD (Document Type Definition) A set of rules (a language) for defining the legal building blocks of a web document like HTML or XML. Learn more about DTD in our DTD tutorial Dynamic IP An IP address that changes each time you connect to the Internet. (See DHCP and Static IP). E-mail (Electronic Mail) Messages sent from one person to another via the Internet.

E-mail Address The address used for sending e-mails to a person or an organization. Typical format is username@hostname. E-mail Server A web server dedicated to the task of serving e-mail. Encryption To convert data from its original form to a form that can only be read by someone that can reverse the encryption. The purpose of encryption is to prevent unauthorized reading of the data. Error See Web Server Error. Ethernet A type of local area network (see LAN). Firewall Software that acts as a security filter that can restrict types of network communication. Most often used between an individual computer (or a LAN) and the Internet. Flash A vector-based multimedia format developed by Macromedia for use on the web. Learn more about Flash in our Flash tutorial Form See HTML Form. Forum In web terms: The same as Newsgroup. Frame In web terms: A part of the browser screen displaying a particular content. Frames are often used to display content from different web pages. FrontPage Web development software for the Windows platform. Developed by Microsoft. FTP (File Transfer Protocol) One of the most common methods for sending files between two computers. FTP Server A web server you can logon to, and download files from (or upload files to). Anonymous FTP is a method for downloading files from an FTP server without using a logon account.

Gateway A computer program for transferring (and reformatting) data between incompatible applications or networks. GIF (Graphics Interchange Format) A compressed format for storing images developed by CompuServe. One of the most common image formats on the Internet. GB Same as Gigabyte. 10GB is ten gigabytes. Gigabyte 1024 megabytes. Commonly rounded down to one billion bytes. Graphics In web terms graphics describe pictures (opposite to text). Graphic Monitor A display monitor that can display graphics. Graphic Printer A printer that can print graphics. Graphical Banner See Banner Ad. Helper application In web terms: A program helping the browser to display, view, or work with files that the browser cannot handle itself. (See Plug-In). Hits The number of times a web object (page or picture) has been viewed or downloaded. (See also Page Hits). Home Page The top-level (main) page of a web site. The default page displayed when you visit a web site. Host See Web Host. Hosting See Web Hosting. Hotlink See Hyperlink.

Trojan Horse Computer program hidden in another computer program with the purpose of destroying software or collecting information about the use of the computer. HTML (Hypertext Markup Language) HTML is the language of the web. HTML is a set of tags that are used to define the content, layout and the formatting of the web document. Web browsers use the HTML tags to define how to display the text. Learn more about HTML in our HTML tutorial HTML Document A document written in HTML. HTML DOM (HTML Document Object Model) A programming interface for HTML documents. Learn more about HTML DOM in our HTML DOM tutorial HTML Editor A software program for editing HTML pages. With an HTML editor you can add elements like lists, tables, layout, font size, and colors to a HTML document like using a word processor. An HTML editor will display the page being edited exactly the same way it will be displayed on the web (See WYSIWYG). HTML Form A form that passes user input back to the server. Learn more about HTML forms in our HTML tutorial HTML Page The same as an HTML Document. HTML Tags Code to identify the different parts of a document so that a web browser will know how to display it. Learn more about HTML tags our HTML tutorial HTTP (Hyper Text Transfer Protocol) The standard set of rules for sending text files across the Internet. It requires an HTTP client program at one end, and an HTTP server program at the other end. HTTP Client A computer program that requests a service from a web server. HTTP Server A computer program providing services from a web server.

HTTPS (Hyper Text Transfer Protocol Secure) Same as HTTP but provides secure Internet communication using SSL. (see also SSL) Hyperlink A pointer to another document. Most often a pointer to another web page. A hyperlink is a synonym for a hotlink or a link, and sometimes called a hypertext connection to another document or web page. Hypermedia An extension to hypertext to include graphics and audio. Hypertext Hypertext is text that is cross-linked to other documents in such a way that the reader can read related documents by clicking on a highlighted word or symbol. (see also hyperlink) IAB (Internet Architecture Board) A council that makes decisions about Internet standards. (See also W3C). IE (Internet Explorer) See Internet Explorer. IETF (Internet Engineering Task Force) A subgroup of IAB that focuses on solving technical problems on the Internet. IIS (Internet Information Server) A web server for Windows operating systems. Developed by Microsoft. IMAP (Internet Message Access Protocol) A standard communication protocol for retrieving e-mails from an e-mail server. IMAP is much like POP but more advanced. Learn more about IMAP in our TCP/IP tutorial Indeo A codec for computer video developed by Intel. Internet A world wide network connecting millions of computers. (See also WWW) Internet Browser See Web Browser. Internet Explorer A browser by Microsoft. The most commonly used browser today. Learn more about browsers in our browser section Internet Server See Web Server

Intranet A private (closed) Internet, running inside a LAN (Local Area Network). IP (Internet Protocol) See TCP/IP. IP Address (Internet Protocol Address) A unique number identifying every computer on the Internet (like 197.123.22.240) IP Number (Internet Protocol Number) Same as an IP address. IP Packet See TCP/IP Packet. IRC (Internet Relay Chat) An Internet system that enables users to take part in on-line discussions. IRC Client A computer program that enables a user to connect to IRC. IRC Server An Internet server dedicated to the task of serving IRC connections. ISAPI (Internet Server API) Application Programming Interface (See API) for Internet Information Server (See IIS). ISDN (Integrated Services Digital Network) A telecommunication standard that uses digital transmission to support data communications over regular telephone lines. ISP (Internet Service Provider) Someone that provides access to the Internet and web hosting. Java A programming language developed by SUN. Mostly for programming web servers and web applets. Java Applet See Web Applet. JavaScript The most popular scripting language on the internet, developed by Netscape. Learn more about JavaScript in our JavaScript tutorial. JPEG (Joint Photographic Expert Group) The organization that promotes the JPG and JPEG graphic formats for storing compressed images. JPEG and JPG Graphic formats for storing compressed images.

JScript Microsoft's version of JavaScript. JSP (Java Server Pages) A Java based technology allowing the insertion of server executable scripts in web pages. Mostly used on Linux, Unix and Solaris platforms. K Same as kilobyte 10K is ten kilobytes.. KB Same as kilobyte 10KB is ten kilobytes.. Keyword In web terms: A word used by a search engine to search for relevant web information. In database terms: A word (or index) used to identify a database record. Kilobyte 1024 bytes. Often called 1K, and rounded down to 1000 bytes. LAN (Local Area Network) A network between computers in a local area (like inside a building), usually connected via local cables. See also WAN. Link The same as a hyperlink. Linux Open source computer operating system based on Unix. Mostly used on servers and web servers. Mail In web terms: the same as e-mail. Mail Server See e-mail server. MB Same as Megabyte. 10MB is ten megabytes. Megabyte 1024 kilobytes. Commonly rounded down to one million bytes. Meta Data Data that describes other data. (See also Meta Tags). Meta Search The method of searching for meta data in documents.

Meta Tags Tags inserted into documents to describe the document. Learn more about meta tags in our HTML tutorial MIDI (Musical Instrument Digital Interface) A standard protocol for communication between computers and musical instruments. Learn more about MIDI in our Media tutorial MIME (Multipurpose Internet Mail Extensions) An Internet standard for defining document types. MIME type examples: text/plain, text/html, image/gif, image/jpg. Learn more about MIME types in our Media tutorial MIME Types Document types defined by MIME. Modem Hardware equipment to connect a computer to a telephone network Typically used to connect to the Internet via a telephone line. Mosaic The first commonly available web browser. Mosaic was released in 1993 and started the popularity of the web. MOV A codec for computer video developed by Apple. Common file extension for QuickTime multimedia files. MP3 (MPEG-1 Audio Layer-3) An audio compression format specially designed for easy download over the Internet. MP3 File An file containing audio compressed with MP3. Most often a music track. MPEG (Moving Picture Expert Group) An ISO standard codec for computer audio and video. MPG Common file extension for MPEG files. MS-DOS (Microsoft Disk Operating System) A general disk based computer operating system (See OS). Originally developed by Microsoft for IBM computers, then developed by Microsoft as a basis for the first versions of Windows. Multimedia In web terms: A presentation combining text with pictures, video, or sound.

MySQL Free open source database software often used on the web. NetBEUI (Net Bios Extended User Interface) An enhanced version of NetBIOS. NetBIOS (Network Basic Input Output System) An application programming interface (API) with functions for local-area networks (LAN). Used by DOS and Windows. Navigate In web terms: The same as Browse. Netscape The browser from the company Netscape. The most popular browser for many years. Today IE has the lead. Learn more about browsers in our browser section Newsgroup An on-line discussion group (a section on a news server) dedicated to a particular subject of interest. News Reader A computer program that enables you to read (and post messages) from an Internet newsgroup. News Server An Internet server dedicated to the task of serving Internet newsgroups. Node In web terms: A computer connected to the Internet, most often used to describe a web server. Opera The browser from the company Opera. Learn more about browsers in our browser section OS (Operating System) The software that manages the basic operating of a computer. Packet See TCP/IP Packet. Page Hits The number of times a web page has been visited by a user. Page Impressions The same as Page Hits. Page Views The same as Page Hits.

PDF (Portable Document Format) A document file format developed by Adobe. Most often used for text documents. Perl (Practical Extraction and Reporting Language) A scripting language for web servers. Most often used on Unix servers. PHP (PHP: Hypertext Preprocessor) A technology allowing the insertion of server executable scripts in web pages. Mostly for Unix, Linux and Solaris platforms. Learn more about PHP in our PHP tutorial. Ping A method used to check the communication between two computers. A "ping" is sent to a remote computer to see if it responds. Platform In web terms: The computer's operating system like Windows, Linux, or OS X. Plug-In An application built into another application. In web terms: A program built in (or added) to a web browser to handle a special type of data like e-mail, sound, or movie files. (See also ActiveX) PNG (Portable Network Graphics) A format for encoding a picture pixel by pixel and sending it over the web. A W3C recommendation for replacing GIF. POP (Post Office Protocol) A standard communication protocol for retrieving e-mails from an e-mail server. (See also IMAP). Learn more about POP and IMAP in our TCP/IP tutorial Port A number that identifies a computer IO (input/output) channel. In web terms: A number that identifies the I/O channel used by an Internet application (A web server normally uses port 80). Protocol See Communication Protocol. PPP (Point to Point Protocol) A communication protocol used for direct connection between two computers. Proxy Server An Internet server dedicated to improve Internet performance. Router A hardware (or software) system that directs (routes) data transfer to different computers in a network.

QuickTime A multimedia file format created by Apple. Learn more about QuickTime in our Media tutorial RAID (Redundant Array of Independent Disks) A standard for connecting multiple disks to the same server for higher security, speed and performance. Often used on web servers. RDF (Resource Description Framework) A framework for constructing languages for describing web resources. Learn more about RDF in our RDF tutorial Real Audio A common multimedia audio format created by Real Networks. Learn more about Real Audio in our Media tutorial Real Video A common multimedia video format created by Real Networks. Learn more about Real Video in our Media tutorial Redirect In web terms: The action when a web page automatically forwards (redirects) the user to another web page. RGB (Red Green Blue) The combination of the three primary colors that can represent a full color spectrum. Learn more about RGB in our HTML tutorial Robot See Web Robot. Schema See XML Schema. Script A collection of statements written in a Scripting Language. Scripting Language In web terms: A simple programming language that can be executed by a web browser or a web server. See JavaScript and VBScript. Scripting Writing a script. Shareware Software that you can try free of charge, and pay a fee to continue to use legally.

Shockwave A format (technology) developed by Macromedia for embedding multimedia content in web pages. Search Engine Computer program used to search and catalog (index) the millions of pages of available information on the web. Common search engines are Google and AltaVista. Semantic Web A web of data with a meaning in the sense that computer programs can know enough about the data to process it. Server See Web Server. Server Errors See Web Server Errors. SGML (Standard Generalized Markup Language) An international standard for markup languages. The basis for HTML and XML. SMIL (Synchronized Multimedia Integration Language) A W3C recommended language for creating multimedia presentations. Learn more about SMIL in our SMIL tutorial SMTP (Simple Mail Transfer Protocol) A standard communication protocol for sending e-mail messages between computers. Learn more about SMTP in our TCP/IP tutorial SOAP (Simple Object Access Protocol) A standard protocol for letting applications communicate with each other using XML. Learn more about SOAP in our SOAP tutorial Solaris Computer operating system from SUN. SPAM In web terms: The action of sending multiple unwelcome messages to a newsgroup or mailing list. Spider See Web Spider. Spoofing Addressing a web page or an e-mail with a false referrer. Like sending an e-mail from a false address.

Spyware Computer software hidden in a computer with the purpose of collecting information about the use of the computer. SQL (Structured Query Language) An ANSI standard computer language for accessing and manipulating databases. Learn more about SQL in our SQL tutorial. SQL Server A database system from Microsoft. Mostly used on high traffic web sites running on the Windows platform. SSI (Server Side Include) A type of HTML comment inserted into a web page to instruct the web server to generate dynamic content. The most common use is to include standard header or footer for the page. SSL (Secure Socket Layer) Software to secure and protect web site communication using encrypted transmission of data. Static IP (address) An IP address that is the same each time connect to the Internet. (See also Dynamic IP). Streaming A method of sending audio and video files over the Internet in such a way that the user can view the file while it is being transferred. Streaming Format The format used for files being streamed over the Internet. (See Windows Media, Real Video and QuickTime). SVG (Scalable Vector Graphics) A W3C recommended language for defining graphics in XML. Learn more about SVG in our SVG tutorial Tag In web terms: Notifications or commands written into a web document. (See HTML Tags) TCP (Transmission Control Protocol) See TCP/IP. TCP/IP (Transmission Control Protocol / Internet Protocol) A collection of Internet communication protocols between two computers. The TCP protocol is responsible for an error free connection between two computers, while the IP protocol is responsible for the data packets sent over the network. Learn more about TCP/IP in our TCP/IP tutorial

TCP/IP Address See IP Address. TCP/IP Packet A "packet" of data sent over a TCP/IP network. (data sent over the Internet is broken down into small "packets" from 40 to 32000 bytes long). UDDI (Universal Description Discovery and Integration) A platform-independent framework for describing services, discovering businesses, and integrating business services using the Internet. Learn more about UDDI in our WSDL tutorial Unix Computer operating system, developed by Bell Laboratories. Mostly used for servers and web servers. UNZIP To uncompress a ZIPPED file. See ZIP. Upload To transfer a file from a local computer to a remote computer. In web terms: to transfer a file from a web client to a web server. (see also Download). URI (Uniform Resource Identifier) Term used to identify resources on the internet. URL is one type of an URI. URL (Uniform Resource Locator) A web address. The standard way to address web documents (pages) on the Internet (like: http://www.w3schools.com/) USENET A world wide news system accessible over the Internet. (See Newsgroups) User Agent The same as a Web Browser. VB (Visual Basic) See Visual Basic. VBScript A scripting language from Microsoft. VBScript is the default scripting language in ASP. Can also be used to program Internet Explorer. Learn more about VBScript in our VBScript tutorial. Virus Same as Computer Virus.

Visit In web terms: A visit to a web site. Commonly used to describe the activity for one visitor of a web site. Visitor In web terms: A visitor of a web site. Commonly used to describe a person visiting (viewing) a web site. Visual Basic A programming language from Microsoft. VPN (Virtual Private Network) A private network between two remote sites, over a secure encrypted virtual Internet connection (a tunnel). VRML (Virtual Reality Modeling Language) A programming language to allow 3D effects to be added to HTML documents. W3C (World Wide Web Consortium) The organization responsible for managing standards for the WWW. Learn more about W3C in our W3C tutorial WAN (Wide Area Network) Computers connected together in a wide network, larger than a LAN, usually connected via phone lines. See also LAN. WAP (Wireless Application Protocol) A leading standard for information services on wireless terminals like digital mobile phones. Learn more about WAP in our WAP tutorial Web Address The same as an URL or URI. See URL. Web Applet A program that can be downloaded over the web and run on the user's computer. Most often written in Java. Web Client A software program used to access web pages. Sometimes the same as a Web Browser, but often used as a broader term. Web Browser A software program used to display web pages. Learn more about browsers in our Browser section

Web Document A document formatted for distribution over the web. Most often a web document is formatted in a markup language like HTML or XML. Web Error See Web Server Error. Web Form See HTML Form. Web Host A web server that "hosts" web services like providing web site space to companies or individuals. Web Hosting The action of providing web host services. Web Page A document (normally an HTML file) designed to be distributed over the Web. Web Robot See Web Spider. Web Server A server is a computer that delivers services or information to other computers. In web terms: A server that delivers web content to web browsers. Web Server Error A message from a web server indicating an error. The most common web server error is "404 File Not Found". Learn more about web server error messages in our HTML tutorial Web Services Software components and applications running on web servers. The server provides these services to other computers, browsers or individuals, using standard communication protocols. Web Site A collection of related web pages belonging to a company or an individual. Web Spider A computer program that searches the Internet for web pages. Common web spiders are the one used by search engines like Google and AltaVista to index the web. Web spiders are also called web robots or wanderers. Web Wanderer See Web Spider.

Wildcard A character used to substitute any character(s). Most often used as an asterix (*) in search tools. Windows 2000, Windows NT, Windows 95/98, Windows XP Computer operating systems from Microsoft. Windows Media Audio and video formats for the Internet, developed by Microsoft. (See ASF, ASX, WMA and WMF). Learn more about Windows Media in our Media tutorial WINZIP A computer program for compressing and decompressing files. See ZIP. WMA Audio file format for the Internet, developed by Microsoft. (See also WMV). Learn more about media formats in our Media tutorial. WMV Video file format for the Internet, developed by Microsoft. (See also WMA). Learn more about media formats in our Media tutorial WML (Wireless Markup Language) A standard for information services on wireless terminals like digital mobile phones, inherited from HTML, but based on XML, and much stricter than HTML. Learn more about WML in our WAP tutorial WML Script Scripting language (programming language) for WML. Learn more about WMLScript in our WMLScript tutorial Worm A computer virus that can make copies of itself and spread to other computers over the Internet. WSDL (Web Services Description Language) An XML-based language for describing Web services and how to access them. Learn more about WSDL in our WSDL tutorial WWW (World Wide Web) A global network of computers using the internet to exchange web documents. (See also Internet) WWW Server The same as a Web Server. WYSIWYG (What You See Is What You Get) In Web terms: To display a web page being edited exactly the same way it will be displayed on the web.

XForms A future version of HTML Forms, based on XML and XHTML. Differs from HTML forms by separating data definition and data display. Providing richer and more device independent user input. Learn more about XForms in our XForms tutorial XHTML (Extensible Hypertext Markup Language) HTML reformulated as XML. XHTML is the latest version of HTML. Developed by W3C. Learn more about XHTML in our XHTML tutorial XPath XPath is a set of syntax rules (language) for defining parts of an XML document. XPath is a major part of the W3C XSL standard. Learn more about XPath in our XPath tutorial XQuery XQuery is a set of syntax rules (language) for extracting information from XML documents. XQuery builds on XPath. XQuery is developed by W3C. Learn more about XQuery in our XQuery tutorial XML (Extensible Markup Language) A simplified version of SGML especially designed for web documents, developed by the W3C. Learn more about XML in our XML tutorial XML Document A document written in XML. XML DOM (XML Document Object Model) A programming interface for XML documents developed by W3C. Learn more about XML DOM in our XML DOM tutorial XML Schema A document that describes, in a formal way, the syntax elements and parameters of a web language. Designed by W3C to replace DTD. Learn more about Schema in our XML Schema tutorial XSD (XML Schema Definition) The same as XML Schema. XSL (Extensible Stylesheet Language) A suite of XML languages developed by W3C, including XSLT, XSL-FO and XPath. Learn more about XSL in our XSL tutorial

XSL-FO (XSL Formatting Objects) An XML language for formatting XML documents. A part of XSL developed by W3C. Learn more about XSL-FO in our XSL-FO tutorial XSLT (XSL Transformations) An XML language for transforming XML documents. A part of XSL developed by W3C. Learn more about XSLT in our XSLT tutorial ZIP A compressing format for computer files. Commonly used for compressing files before downloading over the Internet. ZIP files can be compressed (ZIPPED) and decompressed (UNZIPPED) using a computer program like WINZIP.

Web Search

Web Search Engines

Have you ever used a search engine? Do you wonder how to get listed? This page will help you to get listed in the most popular search engines.

Search Engines that will accept your URL

Google http://www.google.com/addurl.html Yahoo! http://docs.yahoo.com/info/suggest/ Altavista http://www.altavista.com/addurl/ AllTheWeb http://www.alltheweb.com/add_url.php Dmoz http://www.dmoz.org/help/submit.html Webcrawler http://www.webcrawler.com Dogpile http://www.dogpile.com MetaCrawler http://www.metacrawler.com LookSeek http://www.lookseek.com

Web Awards

Website Awards
Have you ever seen an award winning Web Site? Do you wonder how they got the award? This page will help you to understand, and maybe one day your page will receive an award...

How to win an award

The best way to win an award is of course to have an excellent Web Site, but there are some pointers that can help you. There are award giving Web Sites where you can submit your URL, and they review your Site and decide if they will give you their award or not.

Award Sites
TechSightings gives you weekly reviews of the Best High-Tech Sights on the Net. They review pages in different categories. If your site wins, you will receive a prize that you can add to your page. You can suggest your site or another site via an input form.

The DailyWebSite introduces websites that they find very useful and interesting. You can suggest your site or another site via an input form.

WebBuilder reviews Web Sites which you send them via e-mail. They also rate the award giving Web Site. WebbyAwards is the Internet's Oscar Prize. The awards are given once each year, in several categories. Each category has 2 winners, The Webby Award given by the judges, and the People's Voice award, given by the people. You can suggest your site as a nominee for the next year's award.

The GoldenWebAward Presented by The International Association of Web Masters and Designers. In Recognition for creativity, integrity and excellence. The Golden Web Award is a free service, presented to those sites whose web design and content have achieved levels of excellence deserving of recognition. You can suggest your site or another site via an input form.

The Webmaster Award is a special Internet award given only to those elite webmasters responsible for creating those websites that keep us up so late night after night. You can suggest your site or another site via an input form.

The Surfers Choice is a Best of the Web Portal specializing in content rich, high quality Websites. The goal is to provide you with a special service that will promote your site in a small, manageable database where surfers can find the best and most relevant sites. You can suggest your site via an input form. The Golden Crane Creativity Award (GCCA) is awarded to sites providing free instructional information in arts, crafts, music, and other creative activities. If you would like to nominate a site for this award, you can add the URL to their directory for review.

HTML Tutorials Learn HTML HOME HTML HOME

HTML Tutorial
HTML Tutorial
In this HTML tutorial you will learn how to use HTML to create your own Web site. HTML is very easy to learn!

You will enjoy it! Start learning HTML now!

HTML Examples
Learn by 100 examples! With our editor, you can edit HTML, and click on a test button to view the result. Try-It-Yourself!

HTML Quiz Test

Test your HTML skills at W3Schools! Start HTML Quiz!

HTML Exam - Get Your Diploma!

W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building. The HTML Developer Certificate is for developers who want to document their knowledge of HTML 4.01, XHTML, and CSS. HTML Developer Certificate!

HTML References
At W3Schools you will find complete HTML references about tags, attributes, colors, entities, and more. HTML 4.01 References

HTML Introduction

Introduction to HTML

What is an HTML File?

HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor

Do You Want to Try It?

If you are running Windows, start Notepad. If you are on a Mac, start SimpleText. In OSX start TextEdit and change the following preferences: Open the the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above! Type in the following text:
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>

Save the file as "mypage.htm". Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.

Example Explained

The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions. With newer software we think it will be perfectly safe to use .html.

Note on HTML Editors:

You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file. However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.

Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the result in my browser. Why? A: Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm". Also make sure that you use the same name when you open the file in your browser. Q: I have tried to edit an HTML file but the changes don't show in the browser. Why? A: The browser caches your pages so it doesn't have to read the same page twice. When you have

changed a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to read the edited page. Q: What browser should I use? A: You can do all the training with all of the common browsers, like Internet Explorer, Mozilla, Netscape, or Opera. However, some of the examples in our advanced classes require the latest versions of the browsers. Q: Does my computer have to run Windows? What about a Mac? A: You can do all your training on a non-Windows computer like a Mac. However, some of the examples in our advanced classes require a newer version of Windows, like Windows 98 or Windows 2000.

HTML Elements

HTML Elements
HTML documents are text files made up of HTML elements. HTML elements are defined using HTML tags.

HTML Tags

HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>

HTML Elements
Remember the HTML example from the previous page:
<html> <head> <title>Title of page</title>

</head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>

This is an HTML element:

<b>This text is bold</b>

The HTML element starts with a start tag: <b> The content of the HTML element is: This text is bold The HTML element ends with an end tag: </b> The purpose of the <b> tag is to define an HTML element that should be displayed as bold. This is also an HTML element:
<body> This is my first homepage. <b>This text is bold</b> </body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>. The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.

Why do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: <B> means the same as <b>. If you surf the Web, you will notice that plenty of web sites use uppercase HTML tags in their source code. We always use lowercase tags. Why? If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.

Tag Attributes
Tags can have attributes. Attributes provide additional information to an HTML element. The following tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0"> Attributes always come in name/value pairs like this: name="value".

Attributes are always specified in the start tag of an HTML element. Attributes and attribute values are also case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.

Always Quote Attribute Values

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson'

HTML Basic Tags

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks. The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.

Try it Yourself - Examples

A very simple HTML document This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates how the text inside a body element is displayed in the browser. Simple paragraphs This example demonstrates how the text inside paragraph elements is displayed in the browser. (You can find more examples at the bottom of this page)

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p> <p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Basic Notes - Useful Tips

When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text. HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space. Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't use the <br> tag to create lists. Wait until you have learned about HTML lists.) You might have noticed that paragraphs can be written without the closing tag </p>. Don't rely on it. The next version of HTML will not allow you to skip ANY closing tags. HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading. We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.

More Examples
More paragraphs This example demonstrates some of the default behaviors of paragraph elements. Line breaks This example demonstrates the use of line breaks in an HTML document. Poem problems This example demonstrates some problems with HTML formatting. Headings This example demonstrates the tags that display headings in an HTML document. Center aligned heading This example demonstrates a center aligned heading. Horizontal rule This example demonstrates how to insert a horizontal rule. Hidden comments This example demonstrates how to insert a hidden comment in the HTML source code.

Background color This example demonstrates adding a background-color to an HTML page.

Basic HTML Tags

Tag <html> <body> <h1> to <h6> <p> <br> <hr> <!--> Description Defines an HTML document Defines the document's body Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

HTML Formatting

HTML Text Formatting

HTML defines a lot of elements for formatting output, like bold or italic text. Below are a lot of examples that you can try out yourself:

Examples
Text formatting This example demonstrates how you can format text in an HTML document. Preformatted text This example demonstrates how you can control the line breaks and spaces with the pre tag. "Computer output" tags This example demonstrates how different "computer output" tags will be displayed. Address This example demonstrates how to write an address in an HTML document. Abbreviations and acronyms This example demonstrates how to handle an abbreviation or an acronym.

Text direction This example demonstrates how to change the text direction. Quotations This example demonstrates how to handle long and short quotations. Deleted and inserted text This example demonstrates how to mark a text that is deleted or inserted to a document.

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did do they do that?" To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the page.

Text Formatting Tags

Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use <del> instead Deprecated. Use <del> instead Deprecated. Use styles instead

"Computer Output" Tags

Tag <code> <kbd> <samp> <tt> Description Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text

<var> <pre> <listing> <plaintext> <xmp>

Defines a variable Defines preformatted text Deprecated. Use <pre> instead Deprecated. Use <pre> instead Deprecated. Use <pre> instead

Citations, Quotations, and Definition Tags

Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Description Defines an abbreviation Defines an acronym Defines an address element Defines the text direction Defines a long quotation Defines a short quotation Defines a citation Defines a definition term

HTML Entities

HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign (<) in HTML, we have to use a character entity.

Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). To display a less than sign in an HTML document we must write: &lt; or &#60;

The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers. Note that the entities are case sensitive. This example lets you experiment with character entities: Character Entities IE only

Non-breaking Space
The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.

The Most Common Character Entities:

Result < > & " ' Description non-breaking space less than greater than ampersand quotation mark apostrophe Entity Name &nbsp; &lt; &gt; &amp; &quot; &apos; (does not work in IE) Entity Number &#160; &#60; &#62; &#38; &#34; &#39;

Some Other Commonly Used Character Entities:

Result Description cent pound yen section copyright registered trademark multiplication division Entity Name &cent; &pound; &yen; &sect; &copy; &reg; &times; &divide; Entity Number &#162; &#163; &#165; &#167; &#169; &#174; &#215; &#247;

To see a full list of HTML character entities go to our HTML Entities Reference.

HTML Links

HTML Links
HTML uses a hyperlink to link to another document on the Web.

Examples
Create hyperlinks This example demonstrates how to create links in an HTML document. An image as a link This example demonstrates how to use an image as a link. (You can find more examples at the bottom of this page)

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor:
<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. This anchor defines a link to W3Schools:
<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The line above will look like this in a browser: Visit W3Schools!

The Target Attribute

With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window:

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below is the syntax of a named anchor:
<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The line below defines a named anchor:
<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way. To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:
<a href="http://www.w3schools.com/html_links.asp#tips"> Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:
<a href="#tips">Jump to the Useful Tips Section</a>

Basic Notes - Useful Tips

Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://www.w3schools.com/html/" Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.

If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.

More Examples
Open a link in a new browser window This example demonstrates how to link to another page by opening a new window, so that the visitor does not have to leave your Web site. Link to a location on the same page This example demonstrates how to use a link to jump to another part of a document. Break out of a frame This example demonstrates how to break out of a frame, if your site is locked in a frame. Create a mailto link This example demonstrates how to link to a mail message (will only work if you have mail installed). Create a mailto link 2 This example demonstrates a more complicated mailto link.

Link Tags
Tag <a> Description Defines an anchor

HTML Frames

HTML Frames
With frames, you can display more than one Web page in the same browser window.

Examples

Vertical frameset This example demonstrates how to make a vertical frameset with three different documents. Horizontal frameset This example demonstrates how to make a horizontal frameset with three different documents. (You can find more examples at the bottom of this page)

Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are:

The web developer must keep track of more HTML documents It is difficult to print the entire page

The Frameset Tag

The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag

The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

Basic Notes - Useful Tips

If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. Add the <noframes> tag for browsers that do not support frames. Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.

More Examples
How to use the <noframes> tag This example demonstrates how to use the <noframes> tag. Mixed frameset This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns. Frameset with noresize="noresize" This example demonstrates the noresize attribute. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders. Navigation frame This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three links. The source code of the links: <a href ="frame_a.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a> The second frame will show the linked document. Inline frame This example demonstrates how to create an inline frame (a frame inside an HTML page). Jump to a specified section within a frame This example demonstrates two frames. One of the frames has a source to a specified section in a file. The specified section is made with <a name="C10"> in the "link.htm" file.

Jump to a specified section with frame navigation This example demonstrates two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file. The HTML code in the file "content.htm" looks like this: <a href ="link.htm" target ="showframe">Link without Anchor</a><br><a href ="link.htm#C10" target ="showframe">Link with Anchor</a>.

Frame Tags
Tag <frameset> <frame> <noframes> <iframe> Description Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames Defines an inline sub window (frame)

HTML Tables

HTML Tables
With HTML you can create tables.

Examples
Tables This example demonstrates how to create tables in an HTML document. Table borders This example demonstrates different table borders. (You can find more examples at the bottom of this page)

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute:
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">

<tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

How it looks in a browser: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>

How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>&nbsp;</td> </tr> </table>

How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1

Basic Notes - Useful Tips

The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.

More Examples
Table with no border This example demonstrates a table with no borders. Headings in a table This example demonstrates how to display table headers. Empty cells This example demonstrates how to use "&nbsp;" to handle cells that have no content. Table with a caption This example demonstrates a table with a caption. Table cells that span more than one row/column This example demonstrates how to define table cells that span more than one row or one column.

Tags inside a table This example demonstrates how to display elements inside other elements. Cell padding This example demonstrates how to use cellpadding to create more white space between the cell content and its borders. Cell spacing This example demonstrates how to use cellspacing to increase the distance between the cells. Add a background color or a background image to a table This example demonstrates how to add a background to a table. Add a background color or a background image to a table cell This example demonstrates how to add a background to one or more table cells. Align the content in a table cell This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking" table. The frame attribute This example demonstrates how to use the "frame" attribute to control the borders around the table. The frame and border attributes How to use the "frame" and "border" attributes to control the borders around the table.

Table Tags
Tag <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer

HTML Lists

HTML Lists
HTML supports ordered, unordered and definition lists.

Examples
An unordered list This example demonstrates an unordered list. An ordered list This example demonstrates an ordered list. (You can find more examples at the bottom of this page)

Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul> <li>Coffee</li> <li>Milk</li> </ul>

Here is how it looks in a browser:

Coffee Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol> <li>Coffee</li>

<li>Milk</li> </ol>

Here is how it looks in a browser: 1. Coffee 2. Milk Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

Here is how it looks in a browser: Coffee Black hot drink Milk White cold drink Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

More Examples
Different types of ordered lists This example demonstrates different types of ordered lists. Different types of unordered Lists This example demonstrates different types of unordered lists. Nested list This example demonstrates how you can nest lists.

Nested list 2 This example demonstrates a more complicated nested list. Definition list This example demonstrates a definition list.

List Tags
Tag <ol> <ul> <li> <dl> <dt> <dd> <dir> <menu> Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description Deprecated. Use <ul> instead Deprecated. Use <ul> instead

HTML Forms

HTML Forms and Input

HTML Forms are used to select different kinds of user input.

Examples
Text fields This example demonstrates how to create text fields on an HTML page. A user can write text in a text field. Password fields This example demonstrates how to create a password field on an HTML page. (You can find more examples at the bottom of this page)

Forms
A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag.
<form> <input> <input> </form>

Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>

How it looks in a browser: First name: Last name: Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.

<form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>

How it looks in a browser: Male Female Note that only one option can be chosen.

Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form>

How it looks in a browser: I have a bike: I have a car: I have an airplane:

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

How it looks in a browser: Username: If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.
Submit

More Examples
Checkboxes This example demonstrates how to create check-boxes on an HTML page. A user can select or unselect a checkbox. Radio buttons This example demonstrates how to create radio-buttons on an HTML page. Simple drop down box This example demonstrates how to create a simple drop-down box on an HTML page. A drop-down box is a selectable list. Another drop down box This example demonstrates how to create a simple drop-down box with a pre-selected value. Textarea This example demonstrates how to create a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write an unlimited number of characters. Create a button This example demonstrates how to create a button. On the button you can define your own text. Fieldset around data This example demonstrates how to draw a border with a caption around your data.

Form Examples
Form with input fields and a submit button This example demonstrates how to add a form to a page. The form contains two input fields and a submit button.

Form with checkboxes This form contains two checkboxes, and a submit button. Form with radio buttons This form contains two radio buttons, and a submit button. Send e-mail from a form This example demonstrates how to send e-mail from a form.

Form Tags
Tag <form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> <isindex> Description Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Deprecated. Use <input> instead

HTML Images

HTML Images
With HTML you can display images in a document.

Examples
Insert images This example demonstrates how to display images in your Web page.

Insert images from different locations This example demonstrates how to display images from another folder or another server in your Web page. (You can find more examples at the bottom of this page)

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:
<img src="url">

The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Basic Notes - Useful Tips

If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.

More Examples
Background image This example demonstrates how to add a background image to an HTML page. Aligning images This example demonstrates how to align an image within the text. Let the image float This example demonstrates how to let an image float to the left or right of a paragraph. Adjust images to different sizes This example demonstrates how to adjust images to different sizes. Display an alternate text for an image This example demonstrates how to display an alternate text for an image. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. It is a good practice to include the "alt" attribute for each image on a page. Make a hyperlink of an image This example demonstrates how to use an image as a link. Create an image map This example demonstrates how to create an image map, with clickable regions. Each of the regions is a hyperlink. Turn an image into an image map This example demonstrates how to turn an image into an image map. You will see that if you move the mouse over the image, the coordinates will be displayed on the status bar.

Image Tags
Tag <img> <map> <area> Description Defines an image Defines an image map Defines a clickable area inside an image map

HTML Background

HTML Backgrounds
A good background can make a Web site look really great.

Examples
Good background and text color An example of a background color and a text color that makes the text on the page easy to read. Bad background and text color An example of a background color and a text color that makes the text on the page difficult to read. (You can find more examples at the bottom of this page)

Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

The lines above all set the background-color to black.

Background
The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
<body background="clouds.gif">

<body background="http://www.w3schools.com/clouds.gif">

The URL can be relative (as in the first line above) or absolute (as in the second line above). Note: If you want to use a background image, you should keep in mind:

Will the background image increase the loading time too much? Will the background image look good with other images on the page? Will the background image look good with the text colors on the page? Will the background image look good when it is repeated on the page? Will the background image take away the focus from the text?

Basic Notes - Useful Tips

The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations. Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).

More Examples
Good background image An example of a background image and a text color that makes the text on the page easy to read. Good background image 2 An example of a background image and a text color that makes the text on the page easy to read. Bad background image An example of a background image and a text color that makes the text on the page very difficult to read.

HTML Colors

HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values
Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). This table shows the result of combining Red, Green, and Blue light sources:. Color Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)

Color Names
A collection of 147 color names are supported by popular browsers. View the 147 color names

Web Safe Colors

A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. We are not sure how important this is now, since most computers today have the ability to display millions of different colors, but the choice is left to you.

216 Cross Platform Colors

The 216 cross-platform web-safe color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette: 000000 000033 000066 000099 0000CC 0000FF

003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 663333 666633 669933 66CC33 66FF33 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 663366 666666 669966 66CC66 66FF66 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 663399 666699 669999 66CC99 66FF99 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF

HTML Colorvalues

HTML Color Values

Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values
HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF).

Turn Off the Red

If you turn off the Red light completely, there are 65536 different combination of Green and Blue (256 x 256) to experiment with. Click here to see some of these combinations of Green and Blue.

Turn On the Red

By setting the Red parameter to its maximum value, there are still 65536 different combination of Green and Blue (256 x 256) to experiment with. Click here to see some of these combinations of Green and Blue.

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least 16384 different colors. If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero. To see a full list of 16384 different colors based on red light varying from 0 to 255, click on one of the hexadecimal or rgb values below.

Red Light

HEX #000000 #080000 #100000 #180000 #200000 #280000 #300000 #380000 #400000 #480000 #500000 #580000 #600000 #680000 #700000 #780000 #800000 #880000 #900000 #980000 #A00000 #A80000 #B00000 #B80000 #C00000 #C80000 #D00000 #D80000 #E00000 #E80000 #F00000 #F80000 #FF0000

RGB rgb(0,0,0) rgb(8,0,0) rgb(16,0,0) rgb(24,0,0) rgb(32,0,0) rgb(40,0,0) rgb(48,0,0) rgb(56,0,0) rgb(64,0,0) rgb(72,0,0) rgb(80,0,0) rgb(88,0,0) rgb(96,0,0) rgb(104,0,0) rgb(112,0,0) rgb(120,0,0) rgb(128,0,0) rgb(136,0,0) rgb(144,0,0) rgb(152,0,0) rgb(160,0,0) rgb(168,0,0) rgb(176,0,0) rgb(184,0,0) rgb(192,0,0) rgb(200,0,0) rgb(208,0,0) rgb(216,0,0) rgb(224,0,0) rgb(232,0,0) rgb(240,0,0) rgb(248,0,0) rgb(255,0,0)

Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you: RGB(0,0,0) #000000

RGB(8,8,8) RGB(16,16,16) RGB(24,24,24) RGB(32,32,32) RGB(40,40,40) RGB(48,48,48) RGB(56,56,56) RGB(64,64,64) RGB(72,72,72) RGB(80,80,80) RGB(88,88,88) RGB(96,96,96) RGB(104,104,104) RGB(112,112,112) RGB(120,120,120) RGB(128,128,128) RGB(136,136,136) RGB(144,144,144) RGB(152,152,152) RGB(160,160,160) RGB(168,168,168) RGB(176,176,176) RGB(184,184,184) RGB(192,192,192) RGB(200,200,200) RGB(208,208,208) RGB(216,216,216) RGB(224,224,224) RGB(232,232,232) RGB(240,240,240) RGB(248,248,248) RGB(255,255,255)

#080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF

HTML Colornames

HTML Color Names

HTML Color Names

The table below provides a list of the 147 color names supported by popular browsers. Click on a color name (or a hex value) to view the color as the background-color along with different text colors: Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F Color

DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen

#483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA

LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple

#87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080

Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen

#FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32

HTML Quick List

HTML 4.01 Quick List

HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.

HTML Basic Document

<html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html>

Heading Elements
<h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Smallest Heading</h6>

Text Elements
<p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre>

Logical Styles
<em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code>

Physical Styles
<b>This text is bold</b> <i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a> <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a> <a href="mailto:[email protected]">Send e-mail</a>

A named anchor: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>

Unordered list
<ul> <li>First item</li> <li>Next item</li> </ul>

Ordered list
<ol> <li>First item</li> <li>Next item</li> </ol>

Definition list
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl>

Tables
<table border="1"> <tr> <th>someheader</th> <th>someheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table>

Frames

<frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset>

Forms
<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="lastname" value="Nixon" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>Apples <option selected>Bananas <option>Cherries </select> <textarea name="Comment" rows="60" cols="20"></textarea> </form>

Entities
&lt; is the same as < &gt; is the same as > &#169; is the same as

Other Elements
<!-- This is a comment --> <blockquote> Text quoted from some source. </blockquote>

<address> Address 1<br> Address 2<br> City<br> </address> Source : http://www.w3schools.com/html/html_quick.asp

HTML Advanced HTML Layout

HTML Layout
Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML columns.

HTML Layout - Using Tables

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. A part of this page is formatted with two columns, like a newspaper page. As you can see on this page, there is a left column and a right column. This text is displayed in the left column. An HTML <table> is used to divide a part of this Web page into two columns. The trick is to use a table without borders, and maybe a little extra cell-padding. No matter how much text you add to this page, it will stay inside its column borders.

Same Layout - Color Added

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. An HTML <table> is used to divide a part of this Web page into two columns.

A part of this page is formatted with two columns, like a newspaper page. As you can see at this page, there is a left column and a right column.

This text is displayed in the right column. The trick is to use a table without borders, and maybe a little extra cell-padding. No matter how much text you add to this page, it will stay inside its column borders.

Examples
Dividing a part of an HTML page into table columns is very easy to do. To let you experiment with it, we have put together this simple example.

HTML Fonts

HTML Fonts
The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML. Even if a lot of people are using it, you should try to avoid it, and use styles instead.

The HTML <font> Tag

With HTML code like this, you can specify both the size and the type of the browser output :
<p> <font size="2" face="Verdana"> This is a paragraph. </font> </p> <p> <font size="3" face="Times"> This is another paragraph. </font>

</p>

Try it yourself

Font Attributes
Attribute size="number" size="+number" size="-number" face="face-name" color="color-value" color="color-name" Example size="2" size="+1" size="-1" face="Times" color="#eeff00" color="red" Purpose Defines the font size Increases the font size Decreases the font size Defines the font-name Defines the font color Defines the font color

The <font> Tag Should NOT be Used

The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.

The Right Way to Do It - With Styles

Set the font of text This example demonstrates how to set the font of a text. Set the font size of text This example demonstrates how to set the font size of a text. Set the font color of text This example demonstrates how to set the color of a text. Set the font, font size, and font color of text This example demonstrates how to set the font, font size, and font color of a text.

Where to Learn More About Style Sheets?

First off: Finish the last chapters in our HTML tutorial !!! In the following chapters we will explain why some tags, like <font>, are to be removed from the HTML recommendations, and how to insert a style sheet in an HTML document. To learn more about style sheets: Study our CSS Tutorial.

HTML 4.0 Why

Why use HTML 4.0?

HTML 3.2 Was Very Wrong !
The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of the document like: <p>This is a paragraph</p> <h1>This is a heading</h1> When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.

What is so Great About HTML 4.0 ?

In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet. Because HTML 4.0 separates the presentation from the document structure, we have what we always needed: Total control of presentation layout without messing up the document content.

What Should You do About it ?

Do not use presentation attributes inside your HTML tags if you can avoid it. Start using styles! Please read our CSS tutorial to learn about style sheets.

Do not use deprecated tags. Visit our complete HTML 4.01 Reference to see which tags and attributes that are deprecated.

Prepare Yourself for XHTML

XHTML is the "new" HTML. The most important thing you can do is to start writing valid HTML 4.01. Also start writing your tags in lower case. Always close your tag elements. Never end a paragraph without </p>. NOTE: The official HTML 4.01 recommends the use of lower case tags. If you want to read about how this web site was converted to XHTML, please visit our XHTML tutorial.

Validate Your HTML Files as HTML 4.01

An HTML document is validated against a Document Type Definition (DTD). Before an HTML file can be properly validated, a correct DTD must be added as the first line of the file. The HTML 4.01 Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Test Your HTML With the W3C Validator

Input your page address in the box below (like http://www.w3schools.com/)

Validate the page

HTML Styles

HTML Styles
With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet.

Examples
Styles in HTML This example demonstrates how to format an HTML document with style information added to the <head> section. Link that is not underlined This example demonstrates how to make a link that is not underlined, using a style attribute. Link to an external style sheet This example demonstrates how to use the <link> tag to link to an external style sheet.

How to Use Styles

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
<head>

<link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>

Inline Styles
An inline style should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: red; margin-left: 20px"> This is a paragraph </p>

To learn more about styles, visit our CSS tutorial.

Style Tags
Tag <style> <link> <div> <span> <font> <basefont> <center> Description Defines a style definition Defines a resource reference Defines a section in a document Defines a section in a document Deprecated. Use styles instead Deprecated. Use styles instead Deprecated. Use styles instead

HTML Head

HTML Head
Examples
The title of a document The title information inside a head element is not displayed in the browser window. One target for all links This example demonstrates how to use the base tag to let all the links on a page open in a new window.

The Head Element

The head element contains general information, also called meta-information, about a document. Meta means "information about". You can say that meta-data means information about data, or meta-information means information about information.

Information Inside the Head Element

The elements inside the head element should not be displayed by a browser. According to the HTML standard, only a few tags are legal inside the head section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>. Look at the following illegal construct:
<head> <p>This is some text</p> </head>

In this case the browser has two options:

Display the text because it is inside a paragraph element Hide the text because it is inside a head element

If you put an HTML element like <h1> or <p> inside a head element like this, most browsers will display it, even if it is illegal. Should browsers forgive you for errors like this? We don't think so. Others do.

Head Tags
Tag <head> <title> <base> <link> <meta> Tag <!DOCTYPE> Description Defines information about the document Defines the document title Defines a base URL for all the links on a page Defines a resource reference Defines meta information Description Defines the document type. This tag goes before the <html> start tag.

HTML Meta

HTML Meta
Examples
Document description Information inside a meta element describes the document. Document keywords Information inside a meta element describes the document's keywords. Redirect a user This example demonstrates how to redirect a user if your site address has changed.

The Meta Element

As we explained in the previous chapter, the head element contains general information (metainformation) about a document. HTML also includes a meta element that goes inside the head element. The purpose of the meta element is to provide meta-information about the document. Most often the meta element is used to provide information that is relevant to browsers or search engines like describing the content of your document. Note: W3C states that "Some user agents support the use of META to refresh the current page after

a specified number of seconds, with the option of replacing it by a different URI. Authors should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects" at
http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv.

Keywords for Search Engines

Some search engines on the WWW will use the name and content attributes of the meta tag to index your pages. This meta element defines a description of your page: <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> This meta element defines keywords for your page: <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> The intention of the name and content attributes is to describe the content of a page. However, since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely. You can read more about search engines in our Web Building Tutorial.

Unknown Meta Attributes

Sometimes you will see meta attributes that are unknown to you like this: <meta name="security" content="low"> Then you just have to accept that this is something unique to the site or to the author of the site, and that it has probably no relevance to you.

You can see a complete list of the meta element attributes in our Complete HTML 4.01 Tag Reference.

HTML URLs

HTML Uniform Resource Locators

HTML Links
When you click on a link in an HTML document like this: Last Page, an underlying <a> tag points to a place (an address) on the Web with an href attribute value like this: <a href="lastpage.htm">Last Page</a>. The Last Page link in the example is a link that is relative to the Web site that you are browsing, and your browser will construct a full Web address like http://www.w3schools.com/html/lastpage.htm to access the page.

Uniform Resource Locators

Something called a Uniform Resource Locator (URL) is used to address a document (or other data) on the World Wide Web. A full Web address like this: http://www.w3schools.com/html/lastpage.htm follows these syntax rules: scheme://host.domain:port/path/filename The scheme is defining the type of Internet service. The most common type is http. The domain is defining the Internet domain name like w3schools.com. The host is defining the domain host. If omitted, the default host for http is www. The :port is defining the port number at the host. The port number is normally omitted. The default port number for http is 80. The path is defining a path (a sub directory) at the server. If the path is omitted, the resource (the document) must be located at the root directory of the Web site. The filename is defining the name of a document. The default filename might be default.asp, or index.html or something else depending on the settings of the Web server.

URL Schemes
Some examples of the most common schemes can be found below: Schemes file ftp http gopher news telnet WAIS Access a file on your local PC a file on an FTP server a file on a World Wide Web Server a file on a Gopher server a Usenet newsgroup a Telnet connection a file on a WAIS server

Accessing a Newsgroup
The following HTML code: <a href="news:alt.html">HTML Newsgroup</a> creates a link to a newsgroup like this HTML Newsgroup.

Downloading with FTP

The following HTML code: <a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a> creates a link to download a file like this: Download WinZip. (The link doesn't work. Don't try it. It is just an example. W3Schools doesn't really have an ftp directory.)

Link to your Mail system

The following HTML code: <a href="mailto:[email protected]">[email protected]</a> creates a link to your own mail system like this: [email protected]

HTML Scripts

HTML Scripts
Add scripts to HTML pages to make them more dynamic and interactive.

Examples
Insert a script This example demonstrates how to insert a script into your HTML document. Work with browsers that do not support scripts This example demonstrates how to handle browsers that do not support scripting.

Insert a Script into HTML Page

A script in HTML is defined with the <script> tag. Note that you will have to use the type attribute to specify the scripting language.
<html> <head> </head> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

The script above will produce this output: Hello World! Note: To learn more about scripting in HTML, visit our JavaScript School.

How to Handle Older Browsers

A browser that does not recognize the <script> tag at all, will display the <script> tag's content as text on the page. To prevent the browser from doing this, you should hide the script in comment tags. An old browser (that does not recognize the <script> tag) will ignore the comment and it will not write the tag's content on the page, while a new browser will understand that the script should be executed, even if it is surrounded by comment tags.

Example
JavaScript: <script type="text/javascript"> <!-document.write("Hello World!") //--> </script> VBScript: <script type="text/vbscript"> <!-document.write("Hello World!") '--> </script>

The <noscript> Tag

In addition to hiding the script inside a comment, you can also add a <noscript> tag. The <noscript> tag is used to define an alternate text if a script is NOT executed. This tag is used for browsers that recognize the <script> tag, but do not support the script inside, so these browsers will display the text inside the <noscript> tag instead. However, if a browser supports the script inside the <script> tag it will ignore the <noscript> tag.

Example
JavaScript: <script type="text/javascript"> <!-document.write("Hello World!") //--> </script>

<noscript>Your browser does not support JavaScript!</noscript> VBScript: <script type="text/vbscript"> <!-document.write("Hello World!") '--> </script> <noscript>Your browser does not support VBScript!</noscript>

Script Tags
Tag <script> <noscript> <object> <param> <applet> Description Defines a script Defines an alternate text if the script is not executed Defines an embedded object Defines run-time settings (parameters) for an object Deprecated. Use <object> instead

HTML Attributes

HTML 4.0 Standard Attributes

HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions):

Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements. Attribute class id Value class_rule or style_rule id_name Description The class of the element A unique id for the element

style title

style_definition tooltip_text

An inline style definition A text to display in a tool tip

Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Attribute dir lang Value ltr | rtl language_code Description Sets the text direction Sets the language code

Keyboard Attributes
Attribute accesskey tabindex Value character number Description Sets a keyboard shortcut to access an element Sets the tab order of an element

HTML Events

HTML 4.0 Event Attributes

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions. If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

Window Events
Only valid in body and frameset elements. Attribute onload Value script Description Script to be run when a document loads

onunload

script

Script to be run when a document unloads

Form Element Events

Only valid in form elements. Attribute onchange onsubmit onreset onselect onblur onfocus Value script script script script script script Description Script to be run when the element changes Script to be run when the form is submitted Script to be run when the form is reset Script to be run when the element is selected Script to be run when the element loses focus Script to be run when the element gets focus

Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onkeydown onkeypress onkeyup Value script script script Description What to do when key is pressed What to do when key is pressed and released What to do when key is released

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements. Attribute onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup Value script script script script script script script Description What to do on a mouse click What to do on a mouse double-click What to do when mouse button is pressed What to do when mouse pointer moves What to do when mouse pointer moves out of an element What to do when mouse pointer moves over an element What to do when mouse button is released

HTML URL-encode

HTML URL-encoding Reference

Below is a reference of ASCII characters in URL-encoding form (hexadecimal format). Hexadecimal values can be used to display non-standard letters and characters in browsers and plug-ins.

Try It
Type some text or an ASCII value in the input field below, and click on the "URL Encode" button to see the URL-encoding.
This is a text

URL Encode

URL-encoding from %00 to %8f

ASCII Value URL-encode %00 %01 %02 %03 %04 %05 %06 %07 %08 %09 %0a ASCII Value 0 1 2 3 4 5 6 7 8 9 : URL-encode %30 %31 %32 %33 %34 %35 %36 %37 %38 %39 %3a ASCII Value ` a b c d e f g h i j URL-encode %60 %61 %62 %63 %64 %65 %66 %67 %68 %69 %6a

backspace tab linefeed

c return

space ! " # $ % & ' ( ) * + , . /

%0b %0c %0d %0e %0f %10 %11 %12 %13 %14 %15 %16 %17 %18 %19 %1a %1b %1c %1d %1e %1f %20 %21 %22 %23 %24 %25 %26 %27 %28 %29 %2a %2b %2c %2d %2e %2f

; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _

%3b %3c %3d %3e %3f %40 %41 %42 %43 %44 %45 %46 %47 %48 %49 %4a %4b %4c %4d %4e %4f %50 %51 %52 %53 %54 %55 %56 %57 %58 %59 %5a %5b %5c %5d %5e %5f

k l m n o p q r s t u v w x y z { | } ~

%6b %6c %6d %6e %6f %70 %71 %72 %73 %74 %75 %76 %77 %78 %79 %7a %7b %7c %7d %7e %7f %80 %81 %82 %83 %84 %85 %86 %87 %88 %89 %8a %8b %8c %8d %8e %8f

URL-encoding from %90 to %ff

ASCII Value URL-encode %90 ASCII Value URL-encode %c0 ASCII Value URL-encode %f0

%91 %92 %93 %94 %95 %96 %97 %98 %99 %9a %9b %9c %9d %9e %9f %a0 %a1 %a2 %a3 %a4 %a5 %a6 %a7 %a8 %a9 %aa %ab %ac %ad %ae %af %b0 %b1 %b2 %b3 %b4 %b5 %b6 %b7 %b8 %b9 %ba

%c1 %c2 %c3 %c4 %c5 %c6 %c7 %c8 %c9 %ca %cb %cc %cd %ce %cf %d0 %d1 %d2 %d3 %d4 %d5 %d6 %d7 %d8 %d9 %da %db %dc %dd %de %df %e0 %e1 %e2 %e3 %e4 %e5 %e6 %e7 %e8 %e9 %ea

%f1 %f2 %f3 %f4 %f5 %f6 %f7 %f8 %f9 %fa %fb %fc %fd %fe %ff

%bb %bc %bd %be %bf

%eb %ec %ed %ee %ef

HTML Webserver

Ready to Publish Your Work?

Your First Step: A Personal Web Server

If you want other people to view your pages, you must publish them. To publish your work, you have to copy your files to a web server. Your own PC can act as a web server if it is connected to a network. If you are running Windows 98, you can use the PWS (Personal Web Server). PWS is hiding in the PWS folder in your Windows CD.

Personal Web Server (PWS)

PWS turns any Windows computer into a Web server. PWS is easy to install and ideal for developing and testing Web applications. PWS has been optimized for workstation use, but has all the requirements of a full Web server. It also runs Active Server Pages (ASP) just like its larger brother IIS.

How to Install a Personal Web Server (PWS):

Browse your Windows installation to see if you have installed PWS. If not, install PWS from the PWS directory on your Windows CD. Follow the instructions and get your Personal Web Server up and running.

Read more about Microsoft's Personal Web Server. Note: Microsoft Windows XP Home Edition does not come with the option to turn your computer into a PWS!

Internet Information Server (IIS)

Windows 2000's built-in Web server IIS, makes it easy to build large applications for the Web. Both PWS and IIS include ASP, a server-side scripting standard that can be used to create dynamic and interactive Web applications. IIS is also available for Windows NT. If you want to read more about ASP, you should study our ASP School. Read more about Microsoft's Internet Information Services.

Your Next Step: A Professional Web Server

If you do not want to use PWS or IIS, you must upload your files to a public server. Most Internet Service Providers (ISP's) will offer to host your web pages. If your employer has an Internet Server, you can ask him to host your Web site. If you are really serious about this, you should install your own Internet Server.

Before you select an ISP, make sure you read W3Schools Web Hosting Tutorial !!

HTML Summary

You Have Learned HTML, Now What?

HTML Summary
This tutorial has taught you how to use HTML to create your own web site. HTML is the universal markup language for the Web. HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display. The key to HTML is the tags, which indicates what content is coming up. For more information on HTML, please take a look at our HTML examples and our HTML reference.

Now You Know HTML, What's Next?

The next step is to learn XHTML and CSS. XHTML 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. If you want to learn more about XHTML, please visit our XHTML tutorial. CSS CSS is used to control the style and layout of multiple Web pages all at once. With CSS, all formatting can be removed from the HTML document and stored in a separate file. CSS gives you total control of the layout, without messing up the document content. To learn how to create style sheets, please visit our CSS tutorial.

Examples/Quiz HTML Examples

HTML Examples
HTML Basic Tags Examples A very simple HTML document How text inside paragraphs is displayed More paragraphs The use of line breaks Poem problems (some problems with HTML formatting) Heading tags Center aligned heading Insert a horizontal rule Comments in the HTML source Add a background color Examples explained HTML Formatting Text Examples Text formatting Preformatted text (how to control line breaks and spaces)

Different computer-output tags Insert an address Abbreviations and acronyms Text direction Long and short quotations How to mark deleted and inserted text Examples explained HTML Link Examples How to create hyperlinks Set an image as a link Open a link in a new browser window Jump to another part of a document (on the same page) Break out of a frame How to link to a mail message (will only work if you have mail installed) A more complicated mailto link Examples explained HTML Frame Examples How to create a vertical frameset with 3 different documents How to create a horizontal frameset with 3 different documents How to use the <noframes> tag How to mix a frameset in rows and columns Frameset with noresize="noresize" How to create a navigation frame Inline frame (a frame inside an HTML page) Jump to a specified section within a frame Jump to a specified section with frame navigation Examples explained HTML Table Examples Simple tables Different table borders Table with no borders Headings in a table

Empty cells Table with a caption Table cells that span more than one row/column Tags inside a table Cell padding (control the white space between cell content and the borders Cell spacing (control the distance between cells) Add a background color or a background image to a table Add a background color or a background image to a table cell Align the content in a table cell The frame attribute The frame and border attributes Examples explained HTML List Examples An unordered list An ordered list Different types of ordered lists Different types of unordered Lists Nested list Nested list 2 Definition list Examples explained HTML Form and Input Examples How to create input fields Password fields Checkboxes Radiobuttons Simple drop-down box (a selectable list) Another drop-down box with a pre-selected value Textarea (a multi-line text input field) Create a button Draw a border with a caption around data Form with an input field and a submit button Form with checkboxes and a submit button

Form with radiobuttons and a submit button Send e-mail from a form Examples explained HTML Image Examples Insert images Insert images from another folder or another server Background image Align an image within a text Let the image float to the left/right of a paragraph Adjust images to different sizes Display an alternate text for an image (if the browser can't load images) Make a hyperlink of an image Create an image-map, with clickable regions Turn an image into an image map Examples explained HTML Background Examples Good background and text color Bad background and text color Good background image Good background image 2 Bad background image Examples explained HTML Style Examples Styles in the head section of an HTML document Link that is not underlined Link to an external style sheet Examples explained HTML <head> Examples Set a title of a document One target for all links on a page Examples explained

HTML <meta> Examples Document description Document keywords Redirect a user to another URL Examples explained HTML Script Examples Insert a script Handle browsers that do not support scripts Examples explained

HTML Quiz HTML Exam References HTML Tag List HTML and XHTML Full References HTML by Alphabet

HTML 4.01 / XHTML 1.0 Reference

Ordered Alphabetically

NN: indicates the earliest version of Netscape that supports the tag IE: indicates the earliest version of Internet Explorer that supports the tag DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Description Defines a comment Defines the document type Defines an anchor Defines an abbreviation Defines an acronym Defines an address element Deprecated. Defines an applet Defines an area inside an image map NN 3.0 3.0 6.2 6.2 4.0 2.0 3.0 IE DTD 3.0 STF STF 3.0 STF STF 4.0 STF 4.0 STF 3.0 TF 3.0 STF

Tag <!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area>

<b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dir> <div> <dfn> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <h1> to <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label> <legend> <li>

Defines bold text Defines a base URL for all the links in a page Deprecated. Defines a base font Defines the direction of text display Defines big text Defines a long quotation Defines the body element Inserts a single line break Defines a push button Defines a table caption Deprecated. Defines centered text Defines a citation Defines computer code text Defines attributes for table columns Defines groups of table columns Defines a definition description Defines deleted text Deprecated. Defines a directory list Defines a section in a document Defines a definition term Defines a definition list Defines a definition term Defines emphasized text Defines a fieldset Deprecated. Defines text font, size, and color Defines a form Defines a sub window (a frame) Defines a set of frames Defines header 1 to header 6 Defines information about the document Defines a horizontal rule Defines an html document Defines italic text Defines an inline sub window (frame) Defines an image Defines an input field Defines inserted text Deprecated. Defines a single-line input field Defines keyboard text Defines a label for a form control Defines a title in a fieldset Defines a list item

3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0

3.0 6.2 3.0 3.0 3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.0 3.0 3.0 6.2 3.0 3.0 6.2 6.2 3.0

3.0 3.0 3.0 5.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 4.0 3.0 3.0 4.0 4.0 3.0

STF STF TF STF STF STF STF STF STF STF TF STF STF STF STF STF STF TF STF STF STF STF STF STF TF STF F F STF STF STF STF STF TF STF STF STF TF STF STF STF STF

<link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var> <xmp>

Defines a resource reference Defines an image map Deprecated. Defines a menu list Defines meta information Defines a noframe section Defines a noscript section Defines an embedded object Defines an ordered list Defines an option group Defines an option in a drop-down list Defines a paragraph Defines a parameter for an object Defines preformatted text Defines a short quotation Deprecated. Defines strikethrough text Defines sample computer code Defines a script Defines a selectable list Defines small text Defines a section in a document Deprecated. Defines strikethrough text Defines strong text Defines a style definition Defines subscripted text Defines superscripted text Defines a table Defines a table body Defines a table cell Defines a text area Defines a table footer Defines a table header Defines a table header Defines the document title Defines a table row Defines teletype text Deprecated. Defines underlined text Defines an unordered list Defines a variable Deprecated. Defines preformatted text

4.0 3.0 3.0 3.0 3.0 3.0 3.0 6.0 3.0 3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 4.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF TF STF TF STF STF STF STF STF STF STF STF STF TF STF STF STF STF STF TF STF STF STF STF STF STF STF STF STF STF STF STF STF STF TF STF STF

HTML by Function

HTML 4.01 / XHTML 1.0 Reference

Ordered by Function

NN: indicates the earliest version of Netscape that supports the tag IE: indicates the earliest version of Internet Explorer that supports the tag DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Purpose NN IE DTD

Start tag Basic Tags <!DOCTYPE> <html> <body> <h1> to <h6> <p> <br> <hr> <!--...--> Char Format <b> <font> <i> <em> <big> <strong> <small> <sup> <sub> <bdo> <u> Output <pre> <code> <tt> <kbd>

Defines the document type Defines an html document Defines the body element Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

3.0 3.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF STF STF STF STF STF STF

Defines bold text Deprecated. Defines text font, size, and color Defines italic text Defines emphasized text Defines big text Defines strong text Defines small text Defines superscripted text Defines subscripted text Defines the direction of text display Deprecated. Defines underlined text

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.2 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 5.0 3.0

STF TF STF STF STF STF STF STF STF STF TF

Defines preformatted text Defines computer code text Defines teletype text Defines keyboard text

3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0

STF STF STF STF

<var> <dfn> <samp> <xmp> Blocks <acronym> <abbr> <address> <blockquote> <center> <q> <cite> <ins> <del> <s> <strike> Links <a> <link> Frames <frame> <frameset> <noframes> <iframe> Input <form> <input> <textarea> <button> <select> <optgroup> <option> <label> <fieldset> <legend> <isindex> Lists

Defines a variable Defines a definition term Defines sample computer code Deprecated. Defines preformatted text

3.0 3.0 3.0

3.0 STF 3.0 STF 3.0 STF 3.0

Defines an acronym Defines an abbreviation Defines an address element Defines a long quotation Deprecated. Defines centered text Defines a short quotation Defines a citation Defines inserted text Defines deleted text Deprecated. Defines strikethrough text Deprecated. Defines strikethrough text

6.2 6.2 4.0 3.0 3.0 6.2 3.0 6.2 6.2 3.0 3.0

4.0 STF STF 4.0 STF 3.0 STF 3.0 TF 4.0 STF 3.0 STF 4.0 STF 4.0 STF 3.0 TF 3.0 TF

Defines an anchor Defines a resource reference

3.0 4.0

3.0 STF 3.0 STF

Defines a sub window (a frame) Defines a set of frames Defines a noframe section Defines an inline sub window (frame)

3.0 3.0 3.0 6.0

3.0 3.0 3.0 4.0

F F TF TF

Defines a form Defines an input field Defines a text area Defines a push button Defines a selectable list Defines an option group Defines an item in a list box Defines a label for a form control Defines a fieldset Defines a title in a fieldset Deprecated. Defines a single-line input field

3.0 3.0 3.0 6.2 3.0 6.0 3.0 6.2 6.2 6.2 3.0

3.0 3.0 3.0 4.0 3.0 6.0 3.0 4.0 4.0 4.0 3.0

STF STF STF STF STF STF STF STF STF STF TF

<ul> <ol> <li> <dir> <dl> <dt> <dd> <menu> Images <img> <map> <area> Tables <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> <colgroup> Styles <style> <div> <span> Meta Info <head> <title> <meta> <base> <basefont> Programming <script> <noscript> <applet>

Defines an unordered list Defines an ordered list Defines a list item Deprecated. Defines a directory list Defines a definition list Defines a definition term Defines a definition description Deprecated. Defines a menu list

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF STF TF STF STF STF TF

Defines an image Defines an image map Defines an area inside an image map

3.0 3.0 3.0

3.0 STF 3.0 STF 3.0 STF

Defines a table Defines a table caption Defines a table header Defines a table row Defines a table cell Defines a table header Defines a table body Defines a table footer Defines attributes for table columns Defines groups of table columns

3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 4.0 4.0 4.0 3.0 3.0

STF STF STF STF STF STF STF STF STF STF

Defines a style definition Defines a section in a document Defines a section in a document

4.0 3.0 4.0

3.0 STF 3.0 STF 3.0 STF

Defines information about the document Defines the document title Defines meta information Defines a base URL for all the links in a page Deprecated. Defines a base font

3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0

STF STF STF STF TF

Defines a script Defines a noscript section Deprecated. Defines an applet

3.0 3.0 2.0

3.0 STF 3.0 STF 3.0 TF

<object> <param>

Defines an embedded object Defines a parameter for an object

3.0

3.0 STF 3.0 STF

HTML Attributes

HTML Standard Attributes

HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions).

Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements. Attribute class id style title Value class_rule or style_rule id_name style_definition tooltip_text Description The class of the element A unique id for the element An inline style definition A text to display in a tool tip

Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Attribute dir lang Value ltr | rtl language_code Description Sets the text direction Sets the language code

Keyboard Attributes
Attribute accesskey tabindex Value character number Description Sets a keyboard shortcut to access an element Sets the tab order of an element

HTML Events

HTML Event Attributes

New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions. If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

Window Events
Only valid in body and frameset elements Attribute onload onunload Value script script Description Script to be run when a document loads Script to be run when a document unloads

Form Element Events

Only valid in form elements. Attribute onchange onsubmit onreset onselect onblur onfocus Value script script script script script script Description Script to be run when the element changes Script to be run when the form is submitted Script to be run when the form is reset Script to be run when the element is selected Script to be run when the element loses focus Script to be run when the element gets focus

Keyboard Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onkeydown onkeypress onkeyup Value script script script Description What to do when key is pressed What to do when key is pressed and released What to do when key is released

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup Value script script script script script script script Description What to do on a mouse click What to do on a mouse doubleclick What to do when mouse button is pressed What to do when mouse pointer moves What to do when mouse pointer moves over an element What to do when mouse pointer moves out of an element What to do when mouse button is released

HTML Colornames

HTML Color Names

HTML Colors
The table below provides a list of the color names that are supported by all major browsers. Note: If you want your pages to validate with an HTML or a CSS validator, W3C has listed 16 color names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want to use other colors, you must specify their RGB or HEX value. Click on a color name (or a hex value) to view the color as the background-color along with different text colors:

Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink

Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493

Color

DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime

#00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00

LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown

#32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460

SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen

#2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32

HTML ASCII

HTML 7-BIT ASCII Reference

HTML and XHTML uses standard 7-BIT ASCII when transmitting data over the Web. 7-BIT ASCII represents 128 different character values (0-127).

7-BIT Printable ASCII Characters

Result ! " # Description space exclamation mark quotation mark number sign Entity Number &#32; &#33; &#34; &#35;

$ % & ' ( ) * + , . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M

dollar sign percent sign ampersand apostrophe left parenthesis right parenthesis asterisk plus sign comma hyphen period slash digit 0 digit 1 digit 2 digit 3 digit 4 digit 5 digit 6 digit 7 digit 8 digit 9 colon semicolon less-than equals-to greater-than question mark at sign uppercase A uppercase B uppercase C uppercase D uppercase E uppercase F uppercase G uppercase H uppercase I uppercase J uppercase K uppercase L uppercase M

&#36; &#37; &#38; &#39; &#40; &#41; &#42; &#43; &#44; &#45; &#46; &#47; &#48; &#49; &#50; &#51; &#52; &#53; &#54; &#55; &#56; &#57; &#58; &#59; &#60; &#61; &#62; &#63; &#64; &#65; &#66; &#67; &#68; &#69; &#70; &#71; &#72; &#73; &#74; &#75; &#76; &#77;

N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w

uppercase N uppercase O uppercase P uppercase Q uppercase R uppercase S uppercase T uppercase U uppercase V uppercase W uppercase X uppercase Y uppercase Z left square bracket backslash right square bracket caret underscore grave accent lowercase a lowercase b lowercase c lowercase d lowercase e lowercase f lowercase g lowercase h lowercase i lowercase j lowercase k lowercase l lowercase m lowercase n lowercase o lowercase p lowercase q lowercase r lowercase s lowercase t lowercase u lowercase v lowercase w

&#78; &#79; &#80; &#81; &#82; &#83; &#84; &#85; &#86; &#87; &#88; &#89; &#90; &#91; &#92; &#93; &#94; &#95; &#96; &#97; &#98; &#99; &#100; &#101; &#102; &#103; &#104; &#105; &#106; &#107; &#108; &#109; &#110; &#111; &#112; &#113; &#114; &#115; &#116; &#117; &#118; &#119;

x y z { | } ~

lowercase x lowercase y lowercase z left curly brace vertical bar right curly brace tilde

&#120; &#121; &#122; &#123; &#124; &#125; &#126;

7-BIT ASCII Device Control Characters

ASCII device control characters were originally designed to control hardware devices like printers and tape drives. These characters have nothing to do inside any HTML document. Result NUL SOH STX ETX EOT ENQ ACK BEL BS HT LF VT FF CR SO SI DLE DC1 DC2 DC3 DC4 NAK SYN ETB CAN EM SUB ESC Description null character start of header start of text end of text end of transmission enquiry acknowledge bell (ring) backspace horizontal tab line feed vertical tab form feed carriage return shift out shift in data link escape device control 1 device control 2 device control 3 device control 4 negative acknowledge synchronize end transmission block cancel end of medium substitute escape Entity Number &#00; &#01; &#02; &#03; &#04; &#05; &#06; &#07; &#08; &#09; &#10; &#11; &#12; &#13; &#14; &#15; &#16; &#17; &#18; &#19; &#20; &#21; &#22; &#23; &#24; &#25; &#26; &#27;

FS GS RS US DEL

file separator group separator record separator unit separator delete (rubout)

&#28; &#29; &#30; &#31; &#127;

HTML Entities

HTML 4.01 Entities Reference

HTML 4.01 supports the ISO 8859-1 (Latin-1) character set. The lower part of ISO-8859-1 (codes from 0-127) is the original 7-BIT ASCII standard. Most of these characters can be used without a character reference. The higher part of ISO-8859-1 (codes from 160-255) can all be used using character entity names. Note that the entity names are case sensitive.

ASCII Entities with new Entity Names

Result " ' & < > Description quotation mark apostrophe ampersand less-than greater-than Entity Name &quot; &apos; (does not work in IE) &amp; &lt; &gt; Entity Number &#34; &#39; &#38; &#60; &#62;

ISO 8859-1 Symbol Entities

Result Description non-breaking space inverted exclamation mark currency cent pound yen broken vertical bar section Entity Name &nbsp; &iexcl; &curren; &cent; &pound; &yen; &brvbar; &sect; Entity Number &#160; &#161; &#164; &#162; &#163; &#165; &#166; &#167;

spacing diaeresis copyright feminine ordinal indicator angle quotation mark (left) negation soft hyphen registered trademark trademark spacing macron degree plus-or-minus superscript 2 superscript 3 spacing acute micro paragraph middle dot spacing cedilla superscript 1 masculine ordinal indicator angle quotation mark (right) fraction 1/4 fraction 1/2 fraction 3/4 inverted question mark multiplication division

&uml; &copy; &ordf; &laquo; &not; &shy; &reg; &trade; &macr; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; &times; &divide;

&#168; &#169; &#170; &#171; &#172; &#173; &#174; &#8482; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#215; &#247;

ISO 8859-1 Character Entities

Result Description capital a, grave accent capital a, acute accent capital a, circumflex accent capital a, tilde capital a, umlaut mark capital a, ring capital ae capital c, cedilla capital e, grave accent capital e, acute accent Entity Name &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; Entity Number &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201;

capital e, circumflex accent capital e, umlaut mark capital i, grave accent capital i, acute accent capital i, circumflex accent capital i, umlaut mark capital eth, Icelandic capital n, tilde capital o, grave accent capital o, acute accent capital o, circumflex accent capital o, tilde capital o, umlaut mark capital o, slash capital u, grave accent capital u, acute accent capital u, circumflex accent capital u, umlaut mark capital y, acute accent capital THORN, Icelandic small sharp s, German small a, grave accent small a, acute accent small a, circumflex accent small a, tilde small a, umlaut mark small a, ring small ae small c, cedilla small e, grave accent small e, acute accent small e, circumflex accent small e, umlaut mark small i, grave accent small i, acute accent small i, circumflex accent small i, umlaut mark small eth, Icelandic small n, tilde small o, grave accent small o, acute accent small o, circumflex accent

&Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &ograve; &oacute; &ocirc;

&#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244;

small o, tilde small o, umlaut mark small o, slash small u, grave accent small u, acute accent small u, circumflex accent small u, umlaut mark small y, acute accent small thorn, Icelandic small y, umlaut mark

&otilde; &ouml; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

&#245; &#246; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255;

Some Other Entities supported by HTML

Result Description capital ligature OE small ligature oe capital S with caron small S with caron capital Y with diaeres modifier letter circumflex accent small tilde en space em space thin space zero width non-joiner zero width joiner left-to-right mark right-to-left mark en dash em dash left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark dagger double dagger horizontal ellipsis per mille single left-pointing angle quotation Entity Name &OElig; &oelig; &Scaron; &scaron; &Yuml; &circ; &tilde; &ensp; &emsp; &thinsp; &zwnj; &zwj; &lrm; &rlm; &ndash; &mdash; &lsquo; &rsquo; &sbquo; &ldquo; &rdquo; &bdquo; &dagger; &Dagger; &hellip; &permil; &lsaquo; Entity Number &#338; &#339; &#352; &#353; &#376; &#710; &#732; &#8194; &#8195; &#8201; &#8204; &#8205; &#8206; &#8207; &#8211; &#8212; &#8216; &#8217; &#8218; &#8220; &#8221; &#8222; &#8224; &#8225; &#8230; &#8240; &#8249;

single right-pointing angle quotation euro

&rsaquo; &euro;

&#8250; &#8364;

HTML URL Encode

HTML URL-encoding Reference

Below is a reference of ASCII characters in URL-encoding form (hexadecimal format). Hexadecimal values can be used to display non-standard letters and characters in browsers and plug-ins.

Try It
Type some text or an ASCII value in the input field below, and click on the "URL Encode" button to see the URL-encoding.
This is a text

URL Encode

URL-encoding from %00 to %8f

ASCII Value URL-encode %00 %01 %02 %03 %04 %05 %06 %07 ASCII Value 0 1 2 3 4 5 6 7 URL-encode %30 %31 %32 %33 %34 %35 %36 %37 ASCII Value ` a b c d e f g URL-encode %60 %61 %62 %63 %64 %65 %66 %67

backspace tab linefeed

c return

space ! " # $ % & ' ( ) * + , . /

%08 %09 %0a %0b %0c %0d %0e %0f %10 %11 %12 %13 %14 %15 %16 %17 %18 %19 %1a %1b %1c %1d %1e %1f %20 %21 %22 %23 %24 %25 %26 %27 %28 %29 %2a %2b %2c %2d %2e %2f

8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _

%38 %39 %3a %3b %3c %3d %3e %3f %40 %41 %42 %43 %44 %45 %46 %47 %48 %49 %4a %4b %4c %4d %4e %4f %50 %51 %52 %53 %54 %55 %56 %57 %58 %59 %5a %5b %5c %5d %5e %5f

h i j k l m n o p q r s t u v w x y z { | } ~

%68 %69 %6a %6b %6c %6d %6e %6f %70 %71 %72 %73 %74 %75 %76 %77 %78 %79 %7a %7b %7c %7d %7e %7f %80 %81 %82 %83 %84 %85 %86 %87 %88 %89 %8a %8b %8c %8d %8e %8f

URL-encoding from %90 to %ff

ASCII Value |

URL-encode %90 %91 %92 %93 %94 %95 %96 %97 %98 %99 %9a %9b %9c %9d %9e %9f %a0 %a1 %a2 %a3 %a4 %a5 %a6 %a7 %a8 %a9 %aa %ab %ac %ad %ae %af %b0 %b1 %b2 %b3 %b4 %b5 %b6 %b7 %b8

ASCII Value

URL-encode %c0 %c1 %c2 %c3 %c4 %c5 %c6 %c7 %c8 %c9 %ca %cb %cc %cd %ce %cf %d0 %d1 %d2 %d3 %d4 %d5 %d6 %d7 %d8 %d9 %da %db %dc %dd %de %df %e0 %e1 %e2 %e3 %e4 %e5 %e6 %e7 %e8

ASCII Value

URL-encode %f0 %f1 %f2 %f3 %f4 %f5 %f6 %f7 %f8 %f9 %fa %fb %fc %fd %fe %ff

%b9 %ba %bb %bc %bd %be %bf

%e9 %ea %eb %ec %ed %ee %ef

HTTP Messages

HTTP Status Messages

When a browser requests a service from a web server, an error might occur. This is a list of HTTP status messages that might be returned: 1xx: Information Message: 100 Continue Description: Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request The server switches protocol

101 Switching Protocols 2xx: Successful Message: 200 OK 201 Created 202 Accepted 203 Non-authoritative Information 204 No Content 205 Reset Content 206 Partial Content 3xx: Redirection Message: 300 Multiple Choices 301 Moved Permanently

Description: The request is OK The request is complete, and a new resource is created The request is accepted for processing, but the processing is not complete

Description: A link list. The user can select a link and go to that location. Maximum five addresses The requested page has moved to a new url

302 Found 303 See Other 304 Not Modified 305 Use Proxy 306 Unused 307 Temporary Redirect 4xx: Client Error Message: 400 Bad Request 401 Unauthorized 402 Payment Required 403 Forbidden 404 Not Found 405 Method Not Allowed 406 Not Acceptable 407 Proxy Authentication Required 408 Request Timeout 409 Conflict 410 Gone 411 Length Required 412 Precondition Failed 413 Request Entity Too Large 414 Request-url Too Long

The requested page has moved temporarily to a new url The requested page can be found under a different url

This code was used in a previous version. It is no longer used, but the code is reserved The requested page has moved temporarily to a new url

Description: The server did not understand the request The requested page needs a username and a password You can not use this code yet Access is forbidden to the requested page The server can not find the requested page The method specified in the request is not allowed The server can only generate a response that is not accepted by the client You must authenticate with a proxy server before this request can be served The request took longer than the server was prepared to wait The request could not be completed because of a conflict The requested page is no longer available The "Content-Length" is not defined. The server will not accept the request without it The precondition given in the request evaluated to false by the server The server will not accept the request, because the request entity is too large The server will not accept the request, because the url is too long. Occurs when you convert a "post" request to a "get" request with a long query information The server will not accept the request, because the media type is not supported

415 Unsupported Media Type 416 417 Expectation Failed 5xx: Server Error Message: 500 Internal Server Error

Description: The request was not completed. The server met an unexpected condition

501 Not Implemented 502 Bad Gateway 503 Service Unavailable 504 Gateway Timeout 505 HTTP Version Not Supported

The request was not completed. The server did not support the functionality required The request was not completed. The server received an invalid response from the upstream server The request was not completed. The server is temporarily overloading or down The gateway has timed out The server does not support the "http protocol" version

Learn XHTML HOME XHTML Tutorial XHTML HOME

XHTML Tutorial
XHTML Tutorial
XHTML is a stricter and cleaner version of HTML. In this tutorial you will learn the difference between HTML and XHTML. We will also show you how this Web site was converted to XHTML. Start learning XHTML!

XHTML Quiz Test

Test your XHTML skills at W3Schools! Start the XHTML Quiz!

Exam - Get Your Diploma!

W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building. The HTML Developer Certificate is for developers who want to document their knowledge of HTML 4.01, XHTML, and CSS. HTML Developer Certificate!

XHTML References
Our complete XHTML 1.0 reference is an alphabetical list of all XHTML tags with lots of examples and tips. XHTML 1.0 Reference

Table Of Contents
Introduction to XHTML This chapter gives a brief introduction to XHTML and explains what XHTML is. XHTML - Why? This chapter explains why we needed a new language like XHTML. Differences between XHTML and HTML This chapter explains the main differences in syntax between XHTML and HTML. XHTML Syntax This chapter explains the basic syntax of XHTML. XHTML DTD This chapter explains the three different XHTML Document Type Definitions. XHTML HowTo This chapter explains how this web site was converted from HTML to XHTML. XHTML Validation This chapter explains how to validate XHTML documents. XHTML Modules This chapter explains the modularization of XHTML. XHTML Summary This chapter contains a summary on what you have learned in this tutorial and a recommendation on what subject you should study next.

XHTML References
XHTML 1.0 Reference Our complete XHTML 1.0 reference is an alphabetical list of all XHTML tags with lots of examples and tips. XHTML 1.0 Standard Attributes All the tags have attributes. The attributes for each tag are listed in the examples in the "XHTML 1.0 Reference" page. The attributes listed here are the core and language attributes all the tags has as standard (with few exceptions). This reference describes the attributes, and shows possible values for each. XHTML 1.0 Event Attributes All the standard event attributes of the tags. This reference describes the attributes, and shows possible values for each.

XHTML Introduction

Introduction To XHTML
XHTML is a stricter and cleaner version of HTML.

What You Should Already Know

Before you continue you should have a basic understanding of the following:

HTML and the basics of building web pages

If you want to study HTML first, please read our HTML tutorial.

What Is XHTML?

XHTML stands for EXtensible HyperText Markup Language XHTML is aimed to replace HTML XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML

XHTML is HTML defined as an XML application XHTML is a W3C Recommendation

XHTML is a W3C Recommendation

XHTML 1.0 became a W3C Recommendation January 26, 2000. W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML. Stay updated with the latest W3C recommendations in our W3C tutorial.

All New Browsers Support XHTML

XHTML is compatible with HTML 4.01. All new browsers have support for XHTML.

W3Schools Has Converted To XHTML

XHTML is a reformulation of HTML 4.01 in XML, and can be put to immediate use with existing browsers by following a few simple guidelines. W3Schools was completely rewritten to XHTML 1.0 in 1999. A click on this symbol: A click on this symbol: validates the XHTML part of this page. validates the CSS part of this page.

About This Tutorial

The next chapters of this tutorial will explain:

Why you should use XHTML The syntax of XHTML How W3Schools was converted to XHTML XHTML validation XHTML modularization

XHTML Why

XHTML - Why?
XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML.

Why XHTML?
We have reached a point where many pages on the WWW contain "bad" HTML. The following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules:
<html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body>

XML is a markup language where everything has to be marked up correctly, which results in "wellformed" documents. XML was designed to describe data and HTML was designed to display data. Today's market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a "bad" markup language. Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML. XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible !!!

XHTML v HTML

Differences Between XHTML And HTML

You can prepare yourself for XHTML by starting to write strict HTML.

How To Get Ready For XHTML

XHTML is not very different from the HTML 4.01 standard. So, bringing your code up to the 4.01 standard is a good start. Our complete HTML 4.01 reference can help you with that. In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip ending tags (like </p>). Happy coding!

The Most Important Differences:

XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>

In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>

Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags. This is wrong:
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul>

<li>Milk</li> </ul>

This is correct:
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>

Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.

XHTML Elements Must Always Be Closed

Non-empty elements must have an end tag. This is wrong:
<p>This is a paragraph <p>This is another paragraph

This is correct:
<p>This is a paragraph</p> <p>This is another paragraph</p>

Empty Elements Must Also Be Closed

Empty elements must either have an end tag or the start tag must end with />. This is wrong:
A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face">

This is correct:
A break: <br />

A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case

The XHTML specification defines that the tag names and attributes need to be lower case. This is wrong:
<BODY> <P>This is a paragraph</P> </BODY>

This is correct:
<body> <p>This is a paragraph</p> </body>

XHTML Documents Must Have One Root Element

All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
<html> <head> ... </head> <body> ... </body> </html>

XHTML Syntax

XHTML Syntax
Writing XHTML demands a clean HTML syntax.

Some More XHTML Syntax Rules:

Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD defines mandatory elements

Attribute Names Must Be In Lower Case

This is wrong:
<table WIDTH="100%">

This is correct:
<table width="100%">

Attribute Values Must Be Quoted

This is wrong:
<table width=100%>

This is correct:
<table width="100%">

Attribute Minimization Is Forbidden

This is wrong:
<input checked> <input readonly> <input disabled> <option selected> <frame noresize>

This is correct:
<input checked="checked" /> <input readonly="readonly" />

<input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />

Here is a list of the minimized attributes in HTML and how they should be written in XHTML: HTML compact checked declare readonly disabled selected defer ismap nohref noshade nowrap multiple noresize XHTML compact="compact" checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize"

The id Attribute Replaces The name Attribute

HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead. This is wrong:
<img src="picture.gif" name="picture1" />

This is correct:
<img src="picture.gif" id="picture1" />

Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:
<img src="picture.gif" id="picture1" name="picture1" />

IMPORTANT Compatibility Note: To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.

The Lang Attribute

The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element. If you use the lang attribute in an element, you must add the xml:lang attribute, like this:
<div lang="no" xml:lang="no">Heia Norge!</div>

Mandatory XHTML Elements

All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element. This is a minimum XHTML document template:
<!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> </body> </html>

Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag. Note: The xmlns attribute inside the <html> tag is required in XHTML. 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. You will learn more about the XHTML document type definition in the next chapter.

XHTML DTD

XHTML DTD
The XHTML standard defines three Document Type Definitions. The most common is the XHTML Transitional.

<!DOCTYPE> Is Mandatory
An XHTML document consists of three main parts:

the DOCTYPE the Head the Body

The basic document structure is:

<!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>

The DOCTYPE declaration should always be the first line in an XHTML document.

An XHTML Example
This is a simple (minimal) XHTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>

The DOCTYPE declaration defines the document type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The rest of the document looks like HTML:

<html>

<head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>

The 3 Document Type Definitions

DTD specifies the syntax of a web page in SGML. DTD is used by SGML applications, such as HTML, to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations. XHTML is specified in an SGML document type definition or 'DTD'. An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.

There are currently 3 XHTML document types:

STRICT TRANSITIONAL FRAMESET

XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset.

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Use this when you want to use HTML Frames to partition the browser window into two or more frames.

XHTML HowTo

XHTML HowTo
How W3Schools Was Converted To XHTML
W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by Hege Refsnes and Stle Refsnes. To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules of the previous chapters. The following steps were executed (in the order listed below):

A DOCTYPE Definition Was Added

The following DOCTYPE declaration was added as the first line of every page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little too "strict", and a little too hard to conform to.

A Note About The DOCTYPE

Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML. Be aware however, that newer browsers (like Internet Explorer 6) might treat your document differently depending on the <!DOCTYPE> declaration. If the browser reads a document with a DOCTYPE, it might treat the document as "correct". Malformed XHTML might fall over and display differently than without a DOCTYPE.

Lower Case Tag And Attribute Names

Since XHTML is case sensitive, and since XHTML only accepts lower case HTML tags and attribute names, a general search and replace function was executed to replace all upper case tags with lowercase tags. The same was done for attribute names. We have always tried to use lower case names in our Web, so the replace function did not produce many real substitutions.

All Attributes Were Quoted

Since the W3C XHTML 1.0 Recommendation states that all attribute values must be quoted, every page in the web was checked to see that attributes values were properly quoted. This was a timeconsuming job, and we will surely never again forget to put quotes around our attribute values.

Empty Tags: <hr> , <br> and <img>

Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />. This produced a problem with Netscape that misinterpreted the <br/> tag. We don't know why, but changing it to <br /> worked fine. After that discovery, a general search and replace function was executed to swap the tags. A few other tags (like the <img> tag) were suffering from the same problem as above. We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done manually.

The Web Site Was Validated

After that, all pages were validated against the official W3C DTD with this link: XHTML Validator. A few more errors were found and edited manually. The most common error was missing </li> tags in lists. Should we have used a converting tool? Well, we could have used TIDY. Dave Raggett's HTML TIDY is a free utility for cleaning up HTML code. It also works great on the hard-to-read markup generated by specialized HTML editors and conversion tools, and it can help you identify where you need to pay further attention on making your pages more accessible to people with disabilities. The reason why we didn't use Tidy? We knew about XHTML when we started writing this web site. We knew that we had to use lowercase tag names and that we had to quote our attributes. So when the time came (to do the conversion), we simply had to test our pages against the W3C XHTML validator and correct the few mistakes. AND - we have learned a lot about writing "tidy" HTML code.

XHTML Validation

XHTML Validation
An XHTML document is validated against a Document Type Definition.

Validate XHTML With A DTD

An XHTML document is validated against a Document Type Definition (DTD). Before an XHTML file can be properly validated, a correct DTD must be added as the first line of the file. The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

The Frameset DTD includes everything in the transitional DTD plus frames as well:
!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

This is a simple XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>

Test Your XHTML With The W3C Validator

Input your page address in the box below:
http://www.w3schools.com/xhtml/default.asp
Validate the page

XHTML Modules

XHTML Modularization
The XHTML modularization model defines the modules of XHTML.

Why XHTML Modularization?

XHTML is a simple, but large language. XHTML contains most of the functionality a web developer will need. For some purposes XHTML is too large and complex, and for other purposes it is much too simple.

By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and welldefined sets of XHTML elements that can be used separately for simple devices as well as combined with other XML standards into larger and more complex applications. With modular XHTML, product and application designers can:

Choose the elements to be supported by a device using standard XHTML building blocks. Add extensions to XHTML, using XML, without breaking the XHTML standard. Simplify XHTML for devices like hand held computers, mobile phones, TV, and home appliances. Extend XHTML for complex applications by adding new XML functionality (like MathML, SVG, Voice and Multimedia). Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices).

XHTML Modules
W3C has split the definition of XHTML into 28 modules: Module name Applet Module Base Module Basic Forms Module Basic Tables Module Bi-directional Text Module Client Image Map Module Edit Module Forms Module Frames Module Hypertext Module Iframe Module Image Module Intrinsic Events Module Legacy Module Link Module List Module Metainformation Module Name Identification Module Object Module Presentation Module Scripting Module Server Image Map Module Structure Module Style Attribute Module Description Defines the deprecated* applet element. Defines the base element. Defines the basic forms elements. Defines the basic table elements. Defines the bdo element. Defines browser side image map elements. Defines the editing elements del and ins. Defines all elements used in forms. Defines the frameset elements. Defines the a element. Defines the iframe element. Defines the img element. Defines event attributes like onblur and onchange. Defines deprecated* elements and attributes. Defines the link element. Defines the list elements ol, li, ul, dd, dt, and dl. Defines the meta element. Defines the deprecated* name attribute. Defines the object and param elements. Defines presentation elements like b and i. Defines the script and noscript elements. Defines server side image map elements. Defines the elements html, head, title and body. Defines the style attribute.

Style Sheet Module Tables Module Target Module Text Module

Defines the style element. Defines the elements used in tables. Defines the target attribute. Defines text container elements like p and h1.

* Deprecated elements should not be used in XHTML.

XHTML Attributes

XHTML Standard Attributes

XHTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions).

Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements. Attribute class id style title Value class_rule or style_rule id_name style_definition tooltip_text Description The class of the element A unique id for the element An inline style definition A text to display in a tool tip

Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Attribute dir lang Value ltr | rtl language_code Description Sets the text direction Sets the language code

Keyboard Attributes

Attribute accesskey tabindex

Value character number

Description Sets a keyboard shortcut to access an element Sets the tab order of an element

XHTML Events

XHTML Event Attributes

New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions. If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

Window Events
Only valid in body and frameset elements Attribute onload onunload Value script script Description Script to be run when a document loads Script to be run when a document unloads

Form Element Events

Only valid in form elements. Attribute onchange onsubmit onreset onselect onblur onfocus Value script script script script script script Description Script to be run when the element changes Script to be run when the form is submitted Script to be run when the form is reset Script to be run when the element is selected Script to be run when the element loses focus Script to be run when the element gets focus

Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onkeydown onkeypress onkeyup Value script script script Description What to do when key is pressed What to do when key is pressed and released What to do when key is released

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup Value script script script script script script script Description What to do on a mouse click What to do on a mouse doubleclick What to do when mouse button is pressed What to do when mouse pointer moves What to do when mouse pointer moves over an element What to do when mouse pointer moves out of an element What to do when mouse button is released

XHTML Summary

You Have Learned XHTML, Now What?

XHTML Summary
This tutorial has taught you how to create stricter and cleaner HTML pages. You have learned that all XHTML elements must be properly nested, XHTML documents must be well-formed, all tag names must be in lowercase, and that all XHTML elements must be closed.

You have also learned that all XHTML documents must have a DOCTYPE declaration, and that the html, head, title, and body elements must be present. For more information on XHTML, please look at our XHTML reference.

Now You Know XHTML, What's Next?

The next step is to learn CSS and JavaScript. CSS CSS is used to control the style and layout of multiple Web pages all at once. With CSS, all formatting can be removed from the HTML document and stored in a separate file. CSS gives you total control of the layout, without messing up the document content. To learn how to create style sheets, please visit our CSS tutorial. JavaScript JavaScript can make your web site more dynamic. A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction. JavaScript is the most popular scripting language on the internet and it works with all major browsers. If you want to learn more about JavaScript, please visit our JavaScript tutorial.

Quiz/Exam XHTML Quiz XHTML Exam References XHTML Tag List HTML and XHTML Full References HTML by Alphabet

HTML 4.01 / XHTML 1.0 Reference

Ordered Alphabetically

NN: indicates the earliest version of Netscape that supports the tag IE: indicates the earliest version of Internet Explorer that supports the tag DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Description Defines a comment Defines the document type Defines an anchor Defines an abbreviation Defines an acronym Defines an address element Deprecated. Defines an applet Defines an area inside an image map Defines bold text Defines a base URL for all the links in a page Deprecated. Defines a base font Defines the direction of text display Defines big text Defines a long quotation Defines the body element Inserts a single line break Defines a push button Defines a table caption Deprecated. Defines centered text Defines a citation Defines computer code text Defines attributes for table columns Defines groups of table columns Defines a definition description Defines deleted text Deprecated. Defines a directory list Defines a section in a document Defines a definition term Defines a definition list Defines a definition term Defines emphasized text Defines a fieldset Deprecated. Defines text font, size, and color Defines a form Defines a sub window (a frame) Defines a set of frames Defines header 1 to header 6 NN 3.0 3.0 6.2 6.2 4.0 2.0 3.0 3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0 IE DTD 3.0 STF STF 3.0 STF STF 4.0 STF 4.0 STF 3.0 TF 3.0 STF 3.0 STF 3.0 STF 3.0 TF 5.0 STF 3.0 STF 3.0 STF 3.0 STF 3.0 STF 4.0 STF 3.0 STF 3.0 TF 3.0 STF 3.0 STF 3.0 STF 3.0 STF 3.0 STF 4.0 STF 3.0 TF 3.0 STF 3.0 STF 3.0 STF 3.0 STF 3.0 STF 4.0 STF 3.0 TF 3.0 STF 3.0 F 3.0 F 3.0 STF

Tag <!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dir> <div> <dfn> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <h1> to <h6>

3.0 6.2 3.0 3.0 3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0 3.0

<head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea>

Defines information about the document Defines a horizontal rule Defines an html document Defines italic text Defines an inline sub window (frame) Defines an image Defines an input field Defines inserted text Deprecated. Defines a single-line input field Defines keyboard text Defines a label for a form control Defines a title in a fieldset Defines a list item Defines a resource reference Defines an image map Deprecated. Defines a menu list Defines meta information Defines a noframe section Defines a noscript section Defines an embedded object Defines an ordered list Defines an option group Defines an option in a drop-down list Defines a paragraph Defines a parameter for an object Defines preformatted text Defines a short quotation Deprecated. Defines strikethrough text Defines sample computer code Defines a script Defines a selectable list Defines small text Defines a section in a document Deprecated. Defines strikethrough text Defines strong text Defines a style definition Defines subscripted text Defines superscripted text Defines a table Defines a table body Defines a table cell Defines a text area

3.0 3.0 3.0 3.0 6.0 3.0 3.0 6.2 3.0 3.0 6.2 6.2 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 6.0 3.0 3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 4.0 3.0 3.0 4.0 3.0 3.0 4.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0

STF STF STF STF TF STF STF STF TF STF STF STF STF STF STF TF STF TF STF STF STF STF STF STF STF STF STF TF STF STF STF STF STF TF STF STF STF STF STF STF STF STF

<tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var> <xmp>

Defines a table footer Defines a table header Defines a table header Defines the document title Defines a table row Defines teletype text Deprecated. Defines underlined text Defines an unordered list Defines a variable Deprecated. Defines preformatted text

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

4.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF STF STF STF STF TF STF STF

HTML by Function

HTML 4.01 / XHTML 1.0 Reference

Ordered by Function

NN: indicates the earliest version of Netscape that supports the tag IE: indicates the earliest version of Internet Explorer that supports the tag DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Purpose NN IE DTD

Start tag Basic Tags <!DOCTYPE> <html> <body> <h1> to <h6> <p> <br> <hr> <!--...--> Char Format <b> <font> <i>

Defines the document type Defines an html document Defines the body element Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

3.0 3.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF STF STF STF STF STF STF

Defines bold text Deprecated. Defines text font, size, and color Defines italic text

3.0 3.0 3.0

3.0 STF 3.0 TF 3.0 STF

<em> <big> <strong> <small> <sup> <sub> <bdo> <u> Output <pre> <code> <tt> <kbd> <var> <dfn> <samp> <xmp> Blocks <acronym> <abbr> <address> <blockquote> <center> <q> <cite> <ins> <del> <s> <strike> Links <a> <link> Frames <frame> <frameset> <noframes> <iframe>

Defines emphasized text Defines big text Defines strong text Defines small text Defines superscripted text Defines subscripted text Defines the direction of text display Deprecated. Defines underlined text

3.0 3.0 3.0 3.0 3.0 3.0 6.2 3.0

3.0 3.0 3.0 3.0 3.0 3.0 5.0 3.0

STF STF STF STF STF STF STF TF

Defines preformatted text Defines computer code text Defines teletype text Defines keyboard text Defines a variable Defines a definition term Defines sample computer code Deprecated. Defines preformatted text

3.0 3.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF STF STF STF STF STF

Defines an acronym Defines an abbreviation Defines an address element Defines a long quotation Deprecated. Defines centered text Defines a short quotation Defines a citation Defines inserted text Defines deleted text Deprecated. Defines strikethrough text Deprecated. Defines strikethrough text

6.2 6.2 4.0 3.0 3.0 6.2 3.0 6.2 6.2 3.0 3.0

4.0 STF STF 4.0 STF 3.0 STF 3.0 TF 4.0 STF 3.0 STF 4.0 STF 4.0 STF 3.0 TF 3.0 TF

Defines an anchor Defines a resource reference

3.0 4.0

3.0 STF 3.0 STF

Defines a sub window (a frame) Defines a set of frames Defines a noframe section Defines an inline sub window (frame)

3.0 3.0 3.0 6.0

3.0 3.0 3.0 4.0

F F TF TF

Input <form> <input> <textarea> <button> <select> <optgroup> <option> <label> <fieldset> <legend> <isindex> Lists <ul> <ol> <li> <dir> <dl> <dt> <dd> <menu> Images <img> <map> <area> Tables <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> <colgroup> Styles <style>

Defines a form Defines an input field Defines a text area Defines a push button Defines a selectable list Defines an option group Defines an item in a list box Defines a label for a form control Defines a fieldset Defines a title in a fieldset Deprecated. Defines a single-line input field

3.0 3.0 3.0 6.2 3.0 6.0 3.0 6.2 6.2 6.2 3.0

3.0 3.0 3.0 4.0 3.0 6.0 3.0 4.0 4.0 4.0 3.0

STF STF STF STF STF STF STF STF STF STF TF

Defines an unordered list Defines an ordered list Defines a list item Deprecated. Defines a directory list Defines a definition list Defines a definition term Defines a definition description Deprecated. Defines a menu list

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF STF TF STF STF STF TF

Defines an image Defines an image map Defines an area inside an image map

3.0 3.0 3.0

3.0 STF 3.0 STF 3.0 STF

Defines a table Defines a table caption Defines a table header Defines a table row Defines a table cell Defines a table header Defines a table body Defines a table footer Defines attributes for table columns Defines groups of table columns

3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 4.0 4.0 4.0 3.0 3.0

STF STF STF STF STF STF STF STF STF STF

Defines a style definition

4.0

3.0 STF

<div> <span> Meta Info <head> <title> <meta> <base> <basefont> Programming <script> <noscript> <applet> <object> <param>

Defines a section in a document Defines a section in a document

3.0 4.0

3.0 STF 3.0 STF

Defines information about the document Defines the document title Defines meta information Defines a base URL for all the links in a page Deprecated. Defines a base font

3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0

STF STF STF STF TF

Defines a script Defines a noscript section Deprecated. Defines an applet Defines an embedded object Defines a parameter for an object

3.0 3.0 2.0 3.0

3.0 3.0 3.0 3.0 3.0

STF STF TF STF STF

XHTML Attributes

HTML Standard Attributes

HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions).

Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements. Attribute class id style title Value class_rule or style_rule id_name style_definition tooltip_text Description The class of the element A unique id for the element An inline style definition A text to display in a tool tip

Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Attribute dir lang Value ltr | rtl language_code Description Sets the text direction Sets the language code

Keyboard Attributes
Attribute accesskey tabindex Value character number Description Sets a keyboard shortcut to access an element Sets the tab order of an element

XHTML Events

HTML Event Attributes

New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions. If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

Window Events
Only valid in body and frameset elements Attribute onload onunload Value script script Description Script to be run when a document loads Script to be run when a document unloads

Form Element Events

Only valid in form elements. Attribute onchange onsubmit onreset onselect onblur onfocus Value script script script script script script Description Script to be run when the element changes Script to be run when the form is submitted Script to be run when the form is reset Script to be run when the element is selected Script to be run when the element loses focus Script to be run when the element gets focus

Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onkeydown onkeypress onkeyup Value script script script Description What to do when key is pressed What to do when key is pressed and released What to do when key is released

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup Value script script script script script script script Description What to do on a mouse click What to do on a mouse doubleclick What to do when mouse button is pressed What to do when mouse pointer moves What to do when mouse pointer moves over an element What to do when mouse pointer moves out of an element What to do when mouse button is released

XHTML Colornames

HTML Color Names

HTML Colors
The table below provides a list of the color names that are supported by all major browsers. Note: If you want your pages to validate with an HTML or a CSS validator, W3C has listed 16 color names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want to use other colors, you must specify their RGB or HEX value. Click on a color name (or a hex value) to view the color as the background-color along with different text colors: Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B Color

DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan

#8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF

LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed

#FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093

PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen

#FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32

XHTML ASCII

HTML 7-BIT ASCII Reference

HTML and XHTML uses standard 7-BIT ASCII when transmitting data over the Web. 7-BIT ASCII represents 128 different character values (0-127).

7-BIT Printable ASCII Characters

Result ! " # $ % & ' ( ) * + , . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A Description space exclamation mark quotation mark number sign dollar sign percent sign ampersand apostrophe left parenthesis right parenthesis asterisk plus sign comma hyphen period slash digit 0 digit 1 digit 2 digit 3 digit 4 digit 5 digit 6 digit 7 digit 8 digit 9 colon semicolon less-than equals-to greater-than question mark at sign uppercase A Entity Number &#32; &#33; &#34; &#35; &#36; &#37; &#38; &#39; &#40; &#41; &#42; &#43; &#44; &#45; &#46; &#47; &#48; &#49; &#50; &#51; &#52; &#53; &#54; &#55; &#56; &#57; &#58; &#59; &#60; &#61; &#62; &#63; &#64; &#65;

B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k

uppercase B uppercase C uppercase D uppercase E uppercase F uppercase G uppercase H uppercase I uppercase J uppercase K uppercase L uppercase M uppercase N uppercase O uppercase P uppercase Q uppercase R uppercase S uppercase T uppercase U uppercase V uppercase W uppercase X uppercase Y uppercase Z left square bracket backslash right square bracket caret underscore grave accent lowercase a lowercase b lowercase c lowercase d lowercase e lowercase f lowercase g lowercase h lowercase i lowercase j lowercase k

&#66; &#67; &#68; &#69; &#70; &#71; &#72; &#73; &#74; &#75; &#76; &#77; &#78; &#79; &#80; &#81; &#82; &#83; &#84; &#85; &#86; &#87; &#88; &#89; &#90; &#91; &#92; &#93; &#94; &#95; &#96; &#97; &#98; &#99; &#100; &#101; &#102; &#103; &#104; &#105; &#106; &#107;

l m n o p q r s t u v w x y z { | } ~

lowercase l lowercase m lowercase n lowercase o lowercase p lowercase q lowercase r lowercase s lowercase t lowercase u lowercase v lowercase w lowercase x lowercase y lowercase z left curly brace vertical bar right curly brace tilde

&#108; &#109; &#110; &#111; &#112; &#113; &#114; &#115; &#116; &#117; &#118; &#119; &#120; &#121; &#122; &#123; &#124; &#125; &#126;

7-BIT ASCII Device Control Characters

ASCII device control characters were originally designed to control hardware devices like printers and tape drives. These characters have nothing to do inside any HTML document. Result NUL SOH STX ETX EOT ENQ ACK BEL BS HT LF VT FF CR SO SI Description null character start of header start of text end of text end of transmission enquiry acknowledge bell (ring) backspace horizontal tab line feed vertical tab form feed carriage return shift out shift in Entity Number &#00; &#01; &#02; &#03; &#04; &#05; &#06; &#07; &#08; &#09; &#10; &#11; &#12; &#13; &#14; &#15;

DLE DC1 DC2 DC3 DC4 NAK SYN ETB CAN EM SUB ESC FS GS RS US DEL

data link escape device control 1 device control 2 device control 3 device control 4 negative acknowledge synchronize end transmission block cancel end of medium substitute escape file separator group separator record separator unit separator delete (rubout)

&#16; &#17; &#18; &#19; &#20; &#21; &#22; &#23; &#24; &#25; &#26; &#27; &#28; &#29; &#30; &#31; &#127;

XHTML Entities

HTML 4.01 Entities Reference

HTML 4.01 supports the ISO 8859-1 (Latin-1) character set. The lower part of ISO-8859-1 (codes from 0-127) is the original 7-BIT ASCII standard. Most of these characters can be used without a character reference. The higher part of ISO-8859-1 (codes from 160-255) can all be used using character entity names. Note that the entity names are case sensitive.

ASCII Entities with new Entity Names

Result " ' & < > Description quotation mark apostrophe ampersand less-than greater-than Entity Name &quot; &apos; (does not work in IE) &amp; &lt; &gt; Entity Number &#34; &#39; &#38; &#60; &#62;

ISO 8859-1 Symbol Entities

Result Description non-breaking space inverted exclamation mark currency cent pound yen broken vertical bar section spacing diaeresis copyright feminine ordinal indicator angle quotation mark (left) negation soft hyphen registered trademark trademark spacing macron degree plus-or-minus superscript 2 superscript 3 spacing acute micro paragraph middle dot spacing cedilla superscript 1 masculine ordinal indicator angle quotation mark (right) fraction 1/4 fraction 1/2 fraction 3/4 inverted question mark multiplication division Entity Name &nbsp; &iexcl; &curren; &cent; &pound; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy; &reg; &trade; &macr; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; &times; &divide; Entity Number &#160; &#161; &#164; &#162; &#163; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173; &#174; &#8482; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#215; &#247;

ISO 8859-1 Character Entities

Result

Description capital a, grave accent capital a, acute accent capital a, circumflex accent capital a, tilde capital a, umlaut mark capital a, ring capital ae capital c, cedilla capital e, grave accent capital e, acute accent capital e, circumflex accent capital e, umlaut mark capital i, grave accent capital i, acute accent capital i, circumflex accent capital i, umlaut mark capital eth, Icelandic capital n, tilde capital o, grave accent capital o, acute accent capital o, circumflex accent capital o, tilde capital o, umlaut mark capital o, slash capital u, grave accent capital u, acute accent capital u, circumflex accent capital u, umlaut mark capital y, acute accent capital THORN, Icelandic small sharp s, German small a, grave accent small a, acute accent small a, circumflex accent small a, tilde small a, umlaut mark small a, ring small ae small c, cedilla small e, grave accent small e, acute accent

Entity Name &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute;

Entity Number &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233;

small e, circumflex accent small e, umlaut mark small i, grave accent small i, acute accent small i, circumflex accent small i, umlaut mark small eth, Icelandic small n, tilde small o, grave accent small o, acute accent small o, circumflex accent small o, tilde small o, umlaut mark small o, slash small u, grave accent small u, acute accent small u, circumflex accent small u, umlaut mark small y, acute accent small thorn, Icelandic small y, umlaut mark

&ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

&#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255;

Some Other Entities supported by HTML

Result Description capital ligature OE small ligature oe capital S with caron small S with caron capital Y with diaeres modifier letter circumflex accent small tilde en space em space thin space zero width non-joiner zero width joiner left-to-right mark right-to-left mark en dash em dash Entity Name &OElig; &oelig; &Scaron; &scaron; &Yuml; &circ; &tilde; &ensp; &emsp; &thinsp; &zwnj; &zwj; &lrm; &rlm; &ndash; &mdash; Entity Number &#338; &#339; &#352; &#353; &#376; &#710; &#732; &#8194; &#8195; &#8201; &#8204; &#8205; &#8206; &#8207; &#8211; &#8212;

left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark dagger double dagger horizontal ellipsis per mille single left-pointing angle quotation single right-pointing angle quotation euro

&lsquo; &rsquo; &sbquo; &ldquo; &rdquo; &bdquo; &dagger; &Dagger; &hellip; &permil; &lsaquo; &rsaquo; &euro;

&#8216; &#8217; &#8218; &#8220; &#8221; &#8222; &#8224; &#8225; &#8230; &#8240; &#8249; &#8250; &#8364;

XHTML URL Encode

HTML URL-encoding Reference

Below is a reference of ASCII characters in URL-encoding form (hexadecimal format). Hexadecimal values can be used to display non-standard letters and characters in browsers and plug-ins.

Try It
Type some text or an ASCII value in the input field below, and click on the "URL Encode" button to see the URL-encoding.
This is a text

URL Encode

URL-encoding from %00 to %8f

ASCII Value URL-encode %00 %01 %02 %03 %04 %05 %06 %07 %08 %09 %0a %0b %0c %0d %0e %0f %10 %11 %12 %13 %14 %15 %16 %17 %18 %19 %1a %1b %1c %1d %1e %1f %20 %21 %22 %23 %24 %25 %26 ASCII Value 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V URL-encode %30 %31 %32 %33 %34 %35 %36 %37 %38 %39 %3a %3b %3c %3d %3e %3f %40 %41 %42 %43 %44 %45 %46 %47 %48 %49 %4a %4b %4c %4d %4e %4f %50 %51 %52 %53 %54 %55 %56 ASCII Value ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ URL-encode %60 %61 %62 %63 %64 %65 %66 %67 %68 %69 %6a %6b %6c %6d %6e %6f %70 %71 %72 %73 %74 %75 %76 %77 %78 %79 %7a %7b %7c %7d %7e %7f %80 %81 %82 %83 %84 %85 %86

backspace tab linefeed

c return

space ! " # $ % &

' ( ) * + , . /

%27 %28 %29 %2a %2b %2c %2d %2e %2f

W X Y Z [ \ ] ^ _

%57 %58 %59 %5a %5b %5c %5d %5e %5f

%87 %88 %89 %8a %8b %8c %8d %8e %8f

URL-encoding from %90 to %ff

ASCII Value | URL-encode %90 %91 %92 %93 %94 %95 %96 %97 %98 %99 %9a %9b %9c %9d %9e %9f %a0 %a1 %a2 %a3 %a4 %a5 %a6 %a7 %a8 %a9 %aa %ab %ac ASCII Value URL-encode %c0 %c1 %c2 %c3 %c4 %c5 %c6 %c7 %c8 %c9 %ca %cb %cc %cd %ce %cf %d0 %d1 %d2 %d3 %d4 %d5 %d6 %d7 %d8 %d9 %da %db %dc ASCII Value URL-encode %f0 %f1 %f2 %f3 %f4 %f5 %f6 %f7 %f8 %f9 %fa %fb %fc %fd %fe %ff

%ad %ae %af %b0 %b1 %b2 %b3 %b4 %b5 %b6 %b7 %b8 %b9 %ba %bb %bc %bd %be %bf

%dd %de %df %e0 %e1 %e2 %e3 %e4 %e5 %e6 %e7 %e8 %e9 %ea %eb %ec %ed %ee %ef

HTTP Messages

HTTP Status Messages

When a browser requests a service from a web server, an error might occur. This is a list of HTTP status messages that might be returned: 1xx: Information Message: 100 Continue Description: Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request The server switches protocol

101 Switching Protocols 2xx: Successful Message: 200 OK 201 Created

Description: The request is OK The request is complete, and a new resource is created

202 Accepted 203 Non-authoritative Information 204 No Content 205 Reset Content 206 Partial Content 3xx: Redirection Message: 300 Multiple Choices 301 Moved Permanently 302 Found 303 See Other 304 Not Modified 305 Use Proxy 306 Unused 307 Temporary Redirect 4xx: Client Error Message: 400 Bad Request 401 Unauthorized 402 Payment Required 403 Forbidden 404 Not Found 405 Method Not Allowed 406 Not Acceptable 407 Proxy Authentication Required 408 Request Timeout 409 Conflict 410 Gone 411 Length Required 412 Precondition Failed 413 Request Entity Too Large

The request is accepted for processing, but the processing is not complete

Description: A link list. The user can select a link and go to that location. Maximum five addresses The requested page has moved to a new url The requested page has moved temporarily to a new url The requested page can be found under a different url

This code was used in a previous version. It is no longer used, but the code is reserved The requested page has moved temporarily to a new url

Description: The server did not understand the request The requested page needs a username and a password You can not use this code yet Access is forbidden to the requested page The server can not find the requested page The method specified in the request is not allowed The server can only generate a response that is not accepted by the client You must authenticate with a proxy server before this request can be served The request took longer than the server was prepared to wait The request could not be completed because of a conflict The requested page is no longer available The "Content-Length" is not defined. The server will not accept the request without it The precondition given in the request evaluated to false by the server The server will not accept the request, because the request entity is

too large 414 Request-url Too Long The server will not accept the request, because the url is too long. Occurs when you convert a "post" request to a "get" request with a long query information The server will not accept the request, because the media type is not supported

415 Unsupported Media Type 416 417 Expectation Failed 5xx: Server Error Message: 500 Internal Server Error 501 Not Implemented 502 Bad Gateway 503 Service Unavailable 504 Gateway Timeout 505 HTTP Version Not Supported

Description: The request was not completed. The server met an unexpected condition The request was not completed. The server did not support the functionality required The request was not completed. The server received an invalid response from the upstream server The request was not completed. The server is temporarily overloading or down The gateway has timed out The server does not support the "http protocol" version

Learn CSS HOME CSS Basic CSS HOME

CSS Tutorial
CSS Tutorial
Save a lot of work with CSS! In our CSS tutorial you will learn how to use CSS to control the style and layout of

multiple Web pages all at once. Start learning CSS!

CSS Examples
Learn by 70 examples! With our editor, you can edit CSS, and click on a test button to view the result. Try-It-Yourself!

CSS Reference
At W3Schools you will find a complete CSS2 reference, listing properties, units of measurements, colors, and more. CSS2 Reference

CSS Quiz Test

Test your CSS skills at W3Schools! Start CSS Quiz!

Exam - Get Your Diploma!

W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building. The HTML Developer Certificate is for developers who want to document their knowledge of HTML 4.01, XHTML, and CSS. HTML Developer Certificate!

CSS Introduction

Introduction to CSS

What You Should Already Know

Before you continue you should have some basic understanding of the following:

HTML / XHTML

If you want to study this subject first, find the tutorials on our Home page.

What is CSS?

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one

CSS Demo
With CSS, your HTML documents can be displayed using different output styles: See how it works

Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout. To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.

All major browsers support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document! CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

Multiple Styles Will Cascade Into One

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

Cascading Order
What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. 2. 3. 4. Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

CSS Syntax

CSS Syntax
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
body {color: black}

Note: If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:
p { text-align: center; color: black; font-family: arial }

Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
h1,h2,h3,h4,h5,h6 { color: green }

The class Selector

With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align: right} p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>

Note: To apply more than one class per given element, the syntax is:
<p class="center bold"> This is a paragraph. </p>

The paragraph above will be styled by the class "center" AND the class "bold". You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

Add Styles to Elements with Particular Attributes

You can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that has a type attribute with a value of "text":
input[type="text"] {background-color: blue}

The id Selector
You can also define styles for HTML elements with the id selector. The id selector is defined as a #. The style rule below will match the element that has an id attribute with a value of "green":
#green {color: green}

The style rule below will match the p element that has an id with a value of "para1":
p#para1 { text-align: center; color: red }

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
/* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }

CSS How To

CSS How To...

Examples

Look at Example 1 Look at Example 2

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

The browser will read the style definitions from the file mystyle.css, and format the document according to it. An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
<head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>

The browser will now read the style definitions, and format the document according to it. Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:
<head> <style type="text/css"> <!-hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head>

Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: sienna; margin-left: 20px">

This is a paragraph </p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector:
h3 { color: red; text-align: left; font-size: 8pt }

And an internal style sheet has these properties for the h3 selector:
h3 { text-align: right; font-size: 20pt }

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color: red; text-align: right; font-size: 20pt

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

CSS Background

CSS Background
The CSS background properties define the background effects of an element.

Examples
Set the background color This example demonstrates how to set the background color for an element. Set an image as the background This example demonstrates how to set an image as the background. How to repeat a background image This example demonstrates how to repeat a background image. How to repeat a background image only vertically This example demonstrates how to repeat a background image only vertically. How to repeat a background image only horizontally This example demonstrates how to repeat a background image only horizontally. How to place the background image This example demonstrates how to place the image on the page. How to set a fixed background image This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page. All the background properties in one declaration This example demonstrates how to use the shorthand property for setting all of the background properties in one declaration.

CSS Background Properties

The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property background Description Values IE 4 F 1 N 6 W3C 1 A shorthand property for setting background-color all background properties in one background-image declaration background-repeat background-attachment background-position

background-attachment

scroll Sets whether a background image is fixed or scrolls with the fixed rest of the page Sets the background color of an color-rgb element color-hex color-name transparent Sets an image as the background url(URL) none Sets the starting position of a background image top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

background-color

background-image background-position

4 4

1 1

4 6

1 1

background-repeat

Sets if/how a background image repeat will be repeated repeat-x repeat-y no-repeat

CSS Text

CSS Text
The CSS text properties define the appearance of text.

Examples
Set the color of the text This example demonstrates how to set the color of the text. Set the background-color of the text This example demonstrates how to set the background-color of a part of the text.

Specify the space between characters This example demonstrates how to increase or decrease the space between characters. Specify the space between lines This example demonstrates how to specify the space between the lines in a paragraph. Align the text This example demonstrates how to align the text. Decorate the text This example demonstrates how to add decoration to text. Indent text This example demonstrates how to indent the first line of a paragraph. Control the letters in a text This example demonstrates how to control the letters in a text.

CSS Text Properties

The CSS text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property color direction line-height Description Sets the color of a text Sets the text direction Sets the distance between lines Values color ltr rtl normal number length % normal length left right center justify none underline IE 3 6 4 F 1 1 1 N 4 6 4 W3C 1 2 1

letter-spacing text-align

Increase or decrease the space between characters Aligns the text in an element

4 4

1 1

6 4

1 1

text-decoration

Adds decoration to text

overline line-through blink text-indent text-shadow Indents the first line of text in an length element % none color length Controls the letters in an element none capitalize uppercase lowercase normal embed bidi-override Sets how white space inside an element is handled Increase or decrease the space between words normal pre nowrap normal length 4 1 4 1 4 1 4 1

text-transform

unicode-bidi

white-space

word-spacing

CSS Font

CSS Font
The CSS font properties define the font in text.

Examples
Set the font of a text This example demonstrates how to set a font of a text. Set the size of the font This example demonstrates how to set the size of a font. Set the style of the font This example demonstrates how to set the style of a font. Set the variant of the font This example demonstrates how to set the variant of a font.

Set the boldness of the font This example demonstrates how to set the boldness of a font. All the font properties in one declaration This example demonstrates how to use the shorthand property for setting all of the font properties in one declaration.

CSS Font Properties

The CSS font properties allow you to change the font family, boldness, size, and the style of a text. Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property font Description Values IE 4 F 1 N 4 W3C 1 A shorthand property for setting font-style all of the properties for a font in font-variant one declaration font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar A prioritized list of font family names and/or generic family names for an element Sets the size of a font family-name generic-family xx-small x-small small medium large x-large xx-large smaller larger length % none

font-family

font-size

font-size-adjust

Specifies an aspect value for an

element that will preserve the x- number height of the first-choice font font-stretch Condenses or expands the current font-family normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded normal italic oblique normal small-caps normal bold bolder lighter 100 200 300 400 500 600 700 800 900 2

font-style

Sets the style of the font

font-variant font-weight

Displays text in a small-caps font or a normal font Sets the weight of a font

4 4

1 1

6 4

1 1

CSS Border

CSS Border
The CSS border properties define the borders around an element.

Examples

Set the style of the four borders This example demonstrates how to set the style of the four borders. Set different borders on each side This example demonstrates how to set different borders on each side of the element. Set the color of the four borders This example demonstrates how to set the color of the four borders. It can have from one to four colors. Set the width of the bottom border This example demonstrates how to set the width of the bottom border. Set the width of the left border This example demonstrates how to set the width of the left border. Set the width of the right border This example demonstrates how to set the width of the right border. Set the width of the top border This example demonstrates how to set the width of the top border. All the bottom border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the bottom border in one declaration. All the left border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the left border in one declaration. All the right border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the right border in one declaration. All the top border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration. All the width of the border properties in one declaration This example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values. All the border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the four borders in one declaration, can have from one to three values.

CSS Border Properties

The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property border Description Values IE 4 F 1 N 4 W3C 1 A shorthand property for setting border-width all of the properties for the four border-style borders in one declaration border-color A shorthand property for setting border-bottom-width all of the properties for the border-style bottom border in one declaration border-color Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border border-color border-style thin medium thick length color

border-bottom

border-bottom-color border-bottom-style border-bottom-width

4 4 4

1 1 1

6 6 4

2 2 1

border-color

Sets the color of the four borders, can have from one to four colors

border-left

A shorthand property for setting border-left-width all of the properties for the left border-style border in one declaration border-color Sets the color of the left border Sets the style of the left border border-color border-style

border-left-color border-left-style border-left-width

4 4 4

1 1 1

6 6 4

2 2 1

Sets the width of the left border thin medium thick length A shorthand property for setting border-right-width all of the properties for the right border-style border in one declaration border-color Sets the color of the right border border-color Sets the style of the right border border-style Sets the width of the right thin

border-right

border-right-color border-right-style border-right-width

4 4 4

1 1 1

6 6 4

2 2 1

border

medium thick length none hidden dotted dashed solid double groove ridge inset outset 4 1 6 1

border-style

Sets the style of the four borders, can have from one to four styles

border-top

A shorthand property for setting border-top-width all of the properties for the top border-style border in one declaration border-color Sets the color of the top border Sets the style of the top border Sets the width of the top border border-color border-style thin medium thick length thin medium thick length

border-top-color border-top-style border-top-width

4 4 4

1 1 1

6 6 4

2 2 1

border-width

A shorthand property for setting the width of the four borders in one declaration, can have from one to four values

CSS Margin

CSS Margin
The CSS margin properties define the space around elements.

Examples
Set the left margin of a text This example demonstrates how to set the left margin of a text. Set the right margin of a text This example demonstrates how to set the right margin of a text.

Set the top margin of a text This example demonstrates how to set the top margin of a text. Set the bottom margin of a text This example demonstrates how to set the bottom margin of a text. All the margin properties in one declaration This example demonstrates how to set a shorthand property for setting all of the margin properties in one declaration.

CSS Margin Properties

The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once. Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well! Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property margin Description Values IE 4 F 1 N 4 W3C 1 A shorthand property for setting margin-top the margin properties in one margin-right declaration margin-bottom margin-left Sets the bottom margin of an element Sets the left margin of an element Sets the right margin of an element Sets the top margin of an element auto length % auto length % auto length % auto length %

margin-bottom

margin-left

margin-right

margin-top

CSS Padding

CSS Padding
The CSS padding properties define the space between the element border and the element content.

Examples
Set the left padding This example demonstrates how to set the left padding of a tablecell. Set the right padding This example demonstrates how to set the right padding of a tablecell. Set the top padding This example demonstrates how to set the top padding of a tablecell. Set the bottom padding This example demonstrates how to set the bottom padding of a tablecell. All the padding properties in one declaration This example demonstrates a shorthand property for setting all of the padding properties in one declaration, can have from one to four values.

CSS Padding Properties

The CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property padding Description Values IE 4 F 1 N 4 W3C 1 A shorthand property for setting padding-top all of the padding properties in padding-right

one declaration padding-bottom padding-left padding-right padding-top Sets the bottom padding of an element Sets the left padding of an element Sets the right padding of an element Sets the top padding of an element

padding-bottom padding-left length % length % length % length % 4 4 4 4 1 1 1 1 4 4 4 4 1 1 1 1

CSS List

CSS List
The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker.

Examples
The different list-item markers in unordered lists This example demonstrates the different list-item markers in CSS. The different list-item markers in ordered lists This example demonstrates the different list-item markers in CSS. Set an image as the list-item marker This example demonstrates how to set an image as the list-item marker. Place the list-item marker This example demonstrates where to place the list-item marker. All list properties in one declaration This example demonstrates a shorthand property for setting all of the properties for a list in one declaration.

CSS List Properties

The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property list-style Description Values IE 4 F 1 N 6 W3C 1 A shorthand property for setting list-style-type all of the properties for a list in list-style-position one declaration list-style-image Sets an image as the list-item marker Sets where the list-item marker is placed in the list Sets the type of the list-item marker none url inside outside none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha auto length

list-style-image list-style-position list-style-type

4 4 4

1 1 1

6 6 4

1 1 1

marker-offset

CSS Advanced CSS Dimension

CSS Dimension

The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.

Examples
Specify the space between lines This example demonstrates how to specify the space between the lines in a paragraph.

CSS Dimension Properties

The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property height Description Sets the height of an element Values auto length % normal number length % none length % none length % length % length % auto % length IE 4 F 1 N 6 W3C 1

line-height

Sets the distance between lines

max-height

Sets the maximum height of an element Sets the maximum width of an element Sets the minimum height of an element Sets the minimum width of an element Sets the width of an element

max-width

min-height min-width width

1 1 1

6 6 4

2 2 1

CSS Classification

CSS Classification
The CSS classification properties allow you to specify how and where to display an element.

Examples
How to display an element This example demonstrates how to display an element. A simple use of the float property Let an image float to the right in a paragraph. An image with border and margins that floats to the right in a paragraph Let an image float to the right in a paragraph. Add border and margins to the image. An image with a caption that floats to the right Let an image with a caption float to the right. Let the first letter of a paragraph float to the left Let the first letter of a paragraph float to the left and style the letter. Creating a horizontal menu Use float with a list of hyperlinks to create a horizontal menu. Creating a homepage without tables Use float to create a homepage with a header, footer, left content and main content. Position:relative This example demonstrates how to position an element relative to its normal position. Position:absolute This example demonstrates how to position an element using an absolute value. How to make an element invisible This example demonstrates how to make an element invisible. Do you want the element to show or not? Change the cursor This example demonstrates how to change the cursor.

CSS Classification Properties

The CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property clear Description Sets the sides of an element where other floating elements are not allowed Specifies the type of cursor to be displayed Values left right both none url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column IE 4 F 1 N 4 W3C 1

cursor

display

Sets how/if an element is displayed

table-cell table-caption float Sets where an image or a text will appear in another element Places an element in a static, relative, absolute or fixed position Sets if an element should be visible or invisible left right none static relative absolute fixed visible hidden collapse 4 1 4 1

position

visibility

CSS Positioning

CSS Positioning
The CSS positioning properties allows you to position an element.

Examples
Position:relative This example demonstrates how to position an element relative to its normal position. Position:absolute This example demonstrates how to position an element using an absolute value. Set the shape of an element This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed. Overflow This example demonstrates how to set the overflow property to specify what should happen when an element's content is too big to fit in a specified area. Vertical align an image This example demonstrates how to vertical align an image in a text. Z-index Z-index can be used to place an element "behind" another element.

Z-index The elements in the example above have now changed their Z-index.

CSS Positioning Properties

The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property bottom Description Values IE 5 F 1 N 6 W3C 2 Sets how far the bottom edge of auto an element is above/below the % bottom edge of the parent length element Sets the shape of an element. The element is clipped into this shape, and displayed shape auto

clip

left

Sets how far the left edge of an auto element is to the right/left of the % left edge of the parent element length Sets what happens if the content visible of an element overflow its area hidden scroll auto Places an element in a static, relative, absolute or fixed position static relative absolute fixed

overflow

position

right

Sets how far the right edge of an auto element is to the left/right of the % right edge of the parent element length Sets how far the top edge of an element is above/below the top edge of the parent element auto % length

top

vertical-align

Sets the vertical alignment of an baseline element sub super top text-top

middle bottom text-bottom length % z-index Sets the stack order of an element auto number 4 1 6 2

CSS Pseudo-class

CSS Pseudo-classes
CSS pseudo-classes are used to add special effects to some selectors.

Examples
Hyperlink This example demonstrates how to add different colors to a hyperlink in a document. Hyperlink 2 This example demonstrates how to add other styles to hyperlinks. :first-child (does not work in IE) This example demonstrates the use of the :first-child pseudo-class. :lang (does not work in IE) This example demonstrates the use of the :lang pseudo-class.

Syntax
The syntax of pseudo-classes:
selector:pseudo-class {property: value}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property: value}

Anchor Pseudo-classes
A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:
a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! Note: a:active MUST come after a:hover in the CSS definition in order to be effective!! Note: Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:
a.red:visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed in red.

CSS2 - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element. In this example, the selector matches any p element that is the first child of a div element, and indents the first paragraph inside a div element:
div > p:first-child { text-indent:25px }

This selector will match the first paragraph inside the div in the following HTML:
<div> <p> First paragraph in div. This paragraph will be indented. </p>

<p> Second paragraph in div. This paragraph will not be indented. </p> </div>

but it will not match the paragraph in this HTML:

<div> <h1>Header</h1> <p> The first paragraph inside the div. This paragraph will not be indented. </p> </div>

In this example, the selector matches any em element that is the first child of a p element, and sets the font-weight to bold for the first em inside a p element:
p:first-child em { font-weight:bold }

For example, the em in the HTML below is the first child of the paragraph:
<p>I am a <em>strong</em> man.</p>

In this example, the selector matches any a element that is the first child of any element, and sets the text-decoration to none:
a:first-child { text-decoration:none }

For example, the first a in the HTML below is the first child of the paragraph and will not be underlined. But the second a in the paragraph is not the first child of the paragraph and will be underlined:
<p> Visit <a href="http://www.w3schools.com">W3Schools</a> and learn CSS! Visit <a href="http://www.w3schools.com">W3Schools</a> and learn HTML!

</p>

CSS2 - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":
<html> <head> <style type="text/css"> q:lang(no) { quotes: "~" "~" } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> </html>

Pseudo-classes
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Pseudo-class :active :focus :hover :link :visited :first-child Purpose Adds special style to an activated element Adds special style to an element when you mouse over it Adds special style to an unvisited link Adds special style to a visited link Adds special style to an element that is the first child of IE 4 4 3 3 F 1 1 1 1 1 N 8 7 4 4 7 W3C 1 2 1 1 1 2

Adds special style to an element while the element has focus -

some other element :lang Allows the author to specify a language to use in a specified element 1 8 2

CSS Pseudo-element

CSS Pseudo-elements
CSS pseudo-elements are used to add special effects to some selectors.

Examples
Make the first letter special This example demonstrates how to add a special effect to the first letter of a text. Make the first line special This example demonstrates how to add a special effect to the first line of a text.

Syntax
The syntax of pseudo-elements:
selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:

selector.class:pseudo-element {property: value}

The :first-line Pseudo-element

The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:
p {font-size: 12pt} p:first-line {color: #0000FF; font-variant: small-caps} <p>Some text that ends up on two or more lines</p>

The output could be something like this:

SOME TEXT THAT ENDS up on two or more lines In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line depends on the size of the browser window. Note: The "first-line" pseudo-element can only be used with block-level elements. Note: The following properties apply to the "first-line" pseudo-element:

font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear

The :first-letter Pseudo-element

The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:
p {font-size: 12pt} p:first-letter {font-size: 200%; float: left} <p>The first words of an article.</p>

The output could be something like this: ___ | he first | words of an article. Note: The "first-letter" pseudo-element can only be used with block-level elements. Note: The following properties apply to the "first-letter" pseudo- element:

font properties color properties background properties margin properties padding properties border properties text-decoration

vertical-align (only if 'float' is 'none') text-transform line-height float clear

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:
p.article:first-letter {color: #FF0000} <p class="article">A paragraph in an article</p>

The example above will make the first letter of all paragraphs with class="article" red.

Multiple Pseudo-elements
Several pseudo-elements can be combined:
p {font-size: 12pt} p:first-letter {color: #FF0000; font-size: 200%} p:first-line {color: #0000FF} <p>The first words of an article</p>

The output could be something like this: ___ | he first | words of an article. In the example above the first letter of the paragraph will be red with a font size of 24pt. The rest of the first line would be blue while the rest of the paragraph would be the default color.

CSS2 - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before an element. The style below will play a sound before each occurrence of a header one element. h1:before {

content: url(beep.wav) }

CSS2 - The :after Pseudo-element

The ":after" pseudo-element can be used to insert some content after an element. The style below will play a sound after each occurrence of a header one element. h1:after { content: url(beep.wav) }

Pseudo-elements
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Pseudo-element :first-letter :first-line :before :after Purpose Adds special style to the first letter of a text Adds special style to the first line of a text Inserts some content before an element Inserts some content after an element IE 5 5 F 1 1 N 8 8 W3C 1 1 2 2

1.5 8 1.5 8

CSS Media Types

CSS2 Media Types

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.

Media Types
Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sansserif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

The @media Rule

The @media rule allows different style rules for different media in the same style sheet. The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:
<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} } @media print { p.test {font-family:times,serif; font-size:10px} } @media screen,print { p.test {font-weight:bold} } </style> </head> <body> .... </body> </html>

See it yourself ! If you are using Mozilla/Firefox or IE 5+ and print this page, you will see that the paragraph under "Media Types" will be displayed in another font, and have a smaller font size than the rest of the text.

Different Media Types

Note: The media type names are not case-sensitive. Media Type all aural braille embossed handheld print projection screen tty tv Description Used for all media type devices Used for speech and sound synthesizers Used for braille tactile feedback devices Used for paged braille printers Used for small or handheld devices Used for printers Used for projected presentations, like slides Used for computer screens Used for media using a fixed-pitch character grid, like teletypes and terminals Used for television-type devices

CSS Summary

You Have Learned CSS, Now What?

CSS Summary
This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once. You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.

You have also learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links. For more information on CSS, please take a look at our CSS examples and our CSS reference.

Now You Know CSS, What's Next?

The next step is to learn XHTML and JavaScript. XHTML 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. If you want to learn more about XHTML, please visit our XHTML tutorial. JavaScript JavaScript can make your web site more dynamic. A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction. JavaScript is the most popular scripting language on the internet and it works with all major browsers. If you want to learn more about JavaScript, please visit our JavaScript tutorial.

CSS Examples CSS Examples

CSS Examples
Background Set the background color Set an image as the background How to repeat a background image How to repeat a background image only vertically How to repeat a background image only horizontally How to place the background image

A fixed background image (this image will not scroll with the rest of the page) All the background properties in one declaration Text Set the color of the text Specify the space between characters Align the text Decorate the text Indent text Control the letters in a text Font Set the font of a text Set the size of the font Set the style of the font Set the variant of the font Set the boldness of the font All the font properties in one declaration Border Set the style of the four borders Set different borders on each side Set the color of the four borders Set the width of the bottom border Set the width of the left border Set the width of the right border Set the width of the top border All the bottom border properties in one declaration All the left border properties in one declaration All the right border properties in one declaration All the top border properties in one declaration All the width of the border properties in one declaration All the border properties in one declaration Margin Set the left margin of a text Set the right margin of a text Set the top margin of a text

Set the bottom margin of a text All the margin properties in one declaration Padding Set the left padding of a tablecell Set the right padding of a tablecell Set the top padding of a tablecell Set the bottom padding of a tablecell All the padding properties in one declaration List The different list-item markers in unordered lists The different list-item markers in ordered lists Set an image as the list-item marker Place the list-item marker All list properties in one declaration Dimension Increase the space between lines Classification How to display an element? A simple use of the float property An image with border and margins that floats to the right in a paragraph An image with a caption that floats to the right Let the first letter of a paragraph float to the left Creating a horizontal menu Position an element relative to its normal position Position an element with an absolute value How to make an element invisible Change the cursor Positioning Position an element relative to its normal position Position an element with an absolute value Set the shape of an element What should happen when an element's content is too big to fit in a specified area Vertical alignment of an image

Place an element "behind" another element Place an element "behind" another element 2 Pseudo-classes Add different colors to a hyperlink Add other styles to hyperlinks The use of the :first-child pseudo-class The use of the :lang pseudo-class Pseudo-elements Make the first letter special in a text Make the first line special in a text

References CSS2 Reference

CSS2 Reference
The links in the "Property" column point to more useful information about the specific property.

Background Border Classification Dimension Font

Generated Content List and Marker Margin Outlines Padding

Positioning Table Text Pseudo-classes Pseudo-elements

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Background
On-line examples Property background Description Values IE 4 F 1 N 6 W3C 1 A shorthand property for setting background-color all background properties in one background-image declaration background-repeat background-attachment background-position

background-attachment

scroll Sets whether a background image is fixed or scrolls with the fixed rest of the page Sets the background color of an color-rgb element color-hex color-name transparent Sets an image as the background url(URL) none Sets the starting position of a background image top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

background-color

background-image background-position

4 4

1 1

4 6

1 1

background-repeat

Sets if/how a background image repeat will be repeated repeat-x repeat-y no-repeat

Border
On-line examples Property border Description Values IE 4 F 1 N 4 W3C 1 A shorthand property for setting border-width all of the properties for the four border-style borders in one declaration border-color A shorthand property for setting border-bottom-width all of the properties for the border-style bottom border in one declaration border-color Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border border-color border-style thin medium thick length color

border-bottom

border-bottom-color border-bottom-style border-bottom-width

4 4 4

1 1 1

6 6 4

2 2 1

border-color

Sets the color of the four

borders, can have from one to four colors border-left A shorthand property for setting border-left-width all of the properties for the left border-style border in one declaration border-color Sets the color of the left border Sets the style of the left border border-color border-style 4 1 6 1

border-left-color border-left-style border-left-width

4 4 4

1 1 1

6 6 4

2 2 1

Sets the width of the left border thin medium thick length A shorthand property for setting border-right-width all of the properties for the right border-style border in one declaration border-color Sets the color of the right border border-color Sets the style of the right border border-style Sets the width of the right border thin medium thick length none hidden dotted dashed solid double groove ridge inset outset

border-right

border-right-color border-right-style border-right-width

4 4 4

1 1 1

6 6 4

2 2 1

border-style

Sets the style of the four borders, can have from one to four styles

border-top

A shorthand property for setting border-top-width all of the properties for the top border-style border in one declaration border-color Sets the color of the top border Sets the style of the top border Sets the width of the top border border-color border-style thin medium thick length thin medium thick length

border-top-color border-top-style border-top-width

4 4 4

1 1 1

6 6 4

2 2 1

border-width

A shorthand property for setting the width of the four borders in one declaration, can have from one to four values

Classification
On-line examples Property clear Description Sets the sides of an element where other floating elements are not allowed Specifies the type of cursor to be displayed Values left right both none url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption left right none static relative IE 4 F 1 N 4 W3C 1

cursor

display

Sets how/if an element is displayed

float

Sets where an image or a text will appear in another element Places an element in a static, relative, absolute or fixed

position

position visibility Sets if an element should be visible or invisible

absolute fixed visible hidden collapse 4 1 6 2

Dimension
On-line examples Property height Description Sets the height of an element Values auto length % normal number length % none length % none length % length % length % auto % length IE 4 F 1 N 6 W3C 1

line-height

Sets the distance between lines

max-height

Sets the maximum height of an element Sets the maximum width of an element Sets the minimum height of an element Sets the minimum width of an element Sets the width of an element

max-width

min-height min-width width

1 1 1

6 6 4

2 2 1

Font
On-line examples Property font Description Values IE 4 F 1 N 4 W3C 1 A shorthand property for setting font-style all of the properties for a font in font-variant one declaration font-weight font-size/line-height font-family caption icon menu

message-box small-caption status-bar font-family A prioritized list of font family names and/or generic family names for an element Sets the size of a font family-name generic-family xx-small x-small small medium large x-large xx-large smaller larger length % 3 1 4 1

font-size

font-size-adjust

Specifies an aspect value for an none element that will preserve the x- number height of the first-choice font Condenses or expands the current font-family normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded normal italic oblique normal small-caps normal bold bolder lighter 100 200 300 400 500 600 700 800

font-stretch

font-style

Sets the style of the font

font-variant font-weight

Displays text in a small-caps font or a normal font Sets the weight of a font

4 4

1 1

6 4

1 1

900

Generated Content
Property content Description Values IE F 1 N 6 W3C 2 Generates content in a string document. Used with the :before url and :after pseudo-elements counter(name) counter(name, list-styletype) counters(name, string) counters(name, string, liststyle-type) attr(X) open-quote close-quote no-open-quote no-close-quote Sets how much the counter increments on each occurrence of a selector Sets the value the counter is set to on each occurrence of a selector none identifier number none identifier number 1 6

counter-increment

counter-reset

quotes

Sets the type of quotation marks none string string

List and Marker

On-line examples Property list-style Description Values IE 4 F 1 N 6 W3C 1 A shorthand property for setting list-style-type all of the properties for a list in list-style-position one declaration list-style-image Sets an image as the list-item marker Sets where the list-item marker is placed in the list Sets the type of the list-item marker none url inside outside none disc circle square decimal

list-style-image list-style-position list-style-type

4 4 4

1 1 1

6 6 4

1 1 1

decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha marker-offset auto length 1 7 2

Margin
On-line examples Property margin Description Values IE 4 F 1 N 4 W3C 1 A shorthand property for setting margin-top the margin properties in one margin-right declaration margin-bottom margin-left Sets the bottom margin of an element Sets the left margin of an element Sets the right margin of an element Sets the top margin of an element auto length % auto length % auto length % auto length %

margin-bottom

margin-left

margin-right

margin-top

Outlines
Property outline Description Values IE F N W3C 2 A shorthand property for setting outline-color 1.5 -

all the outline properties in one declaration outline-color outline-style Sets the color of the outline around an element Sets the style of the outline around an element

outline-style outline-width color invert none dotted dashed solid double groove ridge inset outset thin medium thick length 1.5 1.5 2 2

outline-width

Sets the width of the outline around an element

1.5 -

Padding
On-line examples Property padding Description Values IE 4 F 1 N 4 W3C 1 A shorthand property for setting padding-top all of the padding properties in padding-right one declaration padding-bottom padding-left Sets the bottom padding of an element Sets the left padding of an element Sets the right padding of an element Sets the top padding of an element length % length % length % length %

padding-bottom padding-left padding-right padding-top

4 4 4 4

1 1 1 1

4 4 4 4

1 1 1 1

Positioning
On-line examples Property bottom Description Values IE 5 F 1 N 6 W3C 2 Sets how far the bottom edge of auto an element is above/below the % bottom edge of the parent length element

clip

Sets the shape of an element. The element is clipped into this shape, and displayed

shape auto

left

Sets how far the left edge of an auto element is to the right/left of the % left edge of the parent element length Sets what happens if the content visible of an element overflow its area hidden scroll auto Places an element in a static, relative, absolute or fixed position static relative absolute fixed

overflow

position

right

Sets how far the right edge of an auto element is to the left/right of the % right edge of the parent element length Sets how far the top edge of an element is above/below the top edge of the parent element auto % length

top

vertical-align

Sets the vertical alignment of an baseline element sub super top text-top middle bottom text-bottom length % Sets the stack order of an element auto number

z-index

Table
Property border-collapse border-spacing Description Values IE 5 F 1 1 N 7 6 W3C 2 2 Sets the border model of a table collapse separate Sets the distance between the borders of adjacent cells (only for the "separated borders" model) Sets the position of the caption according to the table length length

caption-side

top bottom left

right empty-cells Sets whether cells with no visible content should have borders or not (only for the "separated borders" model) Sets the algorithm used to lay out the table show hide 1 6 2

table-layout

auto fixed

Text
On-line examples Property color direction line-height Description Sets the color of a text Sets the text direction Sets the distance between lines Values color ltr rtl normal number length % normal length left right center justify none underline overline line-through blink IE 3 6 4 F 1 1 1 N 4 6 4 W3C 1 2 1

letter-spacing text-align

Increase or decrease the space between characters Aligns the text in an element

4 4

1 1

6 4

1 1

text-decoration

Adds decoration to text

text-indent text-shadow

Indents the first line of text in an length element % none color length Controls the letters in an element none capitalize uppercase lowercase normal embed bidi-override Sets how white space inside an normal

text-transform

unicode-bidi

white-space

element is handled word-spacing Increase or decrease the space between words

pre nowrap normal length 6 1 6 1

Pseudo-classes
On-line examples Pseudo-class :active :focus :hover :link :visited :first-child :lang Purpose Adds special style to an activated element Adds special style to an element when you mouse over it Adds special style to an unvisited link Adds special style to a visited link Adds special style to an element that is the first child of some other element Allows the author to specify a language to use in a specified element IE 4 4 3 3 F 1 1 1 1 1 1 N 8 7 4 4 7 8 W3C 1 2 1 1 1 2 2

Adds special style to an element while the element has focus -

Pseudo-elements
On-line examples Pseudo-element :first-letter :first-line :before :after Purpose Adds special style to the first letter of a text Adds special style to the first line of a text Inserts some content before an element Inserts some content after an element IE 5 5 F 1 1 N 8 8 W3C 1 1 2 2

1.5 8 1.5 8

CSS2 Print

CSS2 Print Reference

Print Properties

Printing HTML documents has always been problematic. In CSS2 the print properties are added to make it easier to print from the Web. The links in the "Property" column point to more useful information about the specific property. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property orphans marks Description Sets the minimum number of lines for a paragraph that must be left at the bottom of a page Sets what sort of marks should be rendered outside the page box Sets a page type to use when displaying an element Sets the page-breaking behavior after an element Values number none crop cross auto identifier auto always avoid left right auto always avoid left right auto avoid auto portrait landscape number 2 2 2 W3C 2

page page-break-after

page-break-before

Sets the page-breaking behavior before an element

page-break-inside size

Sets the page-breaking behavior inside an element Sets the orientation and size of a page

widows

Sets the minimum number of lines for a paragraph that must be left at the top of a page

CSS2 Aural

CSS2 Aural Reference

Aural Style Sheets

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information. Aural presentation can be used:

by blind people to help users learning to read to help users who have reading problems for home entertainment in the car by print-impaired communities

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen). An example of an Aural style sheet:
h1, h2, h3, h4 { voice-family: male; richness: 80; cue-before: url("beep.au") }

The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.

CSS2 Aural Reference

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). Property azimuth Description Values W3C 2 Sets where the sound/voices angle should come from (horizontally) left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards

cue

A shorthand property for setting cue-before the cue-before and cue-after cue-after properties in one declaration Specifies a sound to be played after speaking an element's content to delimit it from other Specifies a sound to be played before speaking an element's content to delimit it from other Sets where the sound/voices should come from (vertically) none url none url angle below level above higher lower

cue-after

cue-before

elevation

pause

A shorthand property for setting pause-before the pause-before and pause-after pause-after properties in one declaration Specifies a pause after speaking time an element's content % Specifies a pause before speaking an element's content Specifies the speaking voice time % frequency x-low low medium high x-high number

pause-after pause-before pitch

2 2 2

pitch-range

Specifies the variation in the speaking voice. (Monotone voice or animated voice?) Specifies a sound to be played while speaking an element's content

play-during

auto none url mix repeat number

richness

Specifies the richness in the speaking voice. (Rich voice or thin voice?) Specifies whether content will render aurally Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a

speak

normal none spell-out always once

speak-header

different header than the previous cell speak-numeral speak-punctuation speech-rate Specifies how to speak numbers digits continuous Specifies how to speak punctuation characters Specifies the speed of the speaking none code number x-slow slow medium fast x-fast faster slower number 2 2 2

stress voice-family

Specifies the "stress" in the speaking voice

2 2

A prioritized list of voice family specific-voice names that contain specific generic-voice voices Specifies the volume of the speaking number % silent x-soft soft medium loud x-loud

volume

CSS Units

CSS Units
Measurements
Unit % in cm mm Description percentage inch centimeter millimeter

em

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses one ex is the x-height of a font (x-height is usually about half the font-size) point (1 pt is the same as 1/72 inch) pica (1 pc is the same as 12 points) pixels (a dot on the computer screen)

ex pt pc px

Colors
Unit color_name rgb(x,x,x) rgb(x%, x%, x%) #rrggbb Description A color name (e.g. red) An RGB value (e.g. rgb(255,0,0)) An RGB percentage value (e.g. rgb(100%,0%,0%)) A HEX number (e.g. #ff0000)

CSS Colors

CSS Colors
Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values
CSS colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). This table shows the result of combining Red, Green, and Blue light sources:. Color Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0)

#00FFFF #FF00FF #C0C0C0 #FFFFFF

rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)

Color Names
A collection of 147 color names are supported by popular browsers. View the 147 color names

Web Safe Colors

A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40 different "reserved" fixed system colors (about 20 each). We are not sure how important this is now, since most computers today have the ability to display millions of different colors, but the choice is left to you.

216 Cross Platform Colors

The 216 cross-platform web-safe color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette: 000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF

663300 666600 669900 66CC00 66FF00 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

663333 666633 669933 66CC33 66FF33 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

663366 666666 669966 66CC66 66FF66 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

663399 666699 669999 66CC99 66FF99 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF

CSS Colorvalues

CSS Color Values

Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values
CSS colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

16384 Different Colors

Most modern monitors are capable of displaying at least 16384 different colors. If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero. To see a full list of 16384 different colors based on red light varying from 0 to 255, click on one of the hexadecimal or rgb values below. #000000 #080000 #100000 #180000 #200000 #280000 #300000 #380000 #400000 #480000 #500000 #580000 #600000 #680000 #700000 #780000 #800000 #880000 #900000 #980000 #A00000 #A80000 #B00000 #B80000 #C00000 #C80000 #D00000 #D80000 #E00000 #E80000 #F00000 #F80000 rgb(0,0,0) rgb(8,0,0) rgb(16,0,0) rgb(24,0,0) rgb(32,0,0) rgb(40,0,0) rgb(48,0,0) rgb(56,0,0) rgb(64,0,0) rgb(72,0,0) rgb(80,0,0) rgb(88,0,0) rgb(96,0,0) rgb(104,0,0) rgb(112,0,0) rgb(120,0,0) rgb(128,0,0) rgb(136,0,0) rgb(144,0,0) rgb(152,0,0) rgb(160,0,0) rgb(168,0,0) rgb(176,0,0) rgb(184,0,0) rgb(192,0,0) rgb(200,0,0) rgb(208,0,0) rgb(216,0,0) rgb(224,0,0) rgb(232,0,0) rgb(240,0,0) rgb(248,0,0)

#FF0000

rgb(255,0,0)

Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you: RGB(0,0,0) RGB(8,8,8) RGB(16,16,16) RGB(24,24,24) RGB(32,32,32) RGB(40,40,40) RGB(48,48,48) RGB(56,56,56) RGB(64,64,64) RGB(72,72,72) RGB(80,80,80) RGB(88,88,88) RGB(96,96,96) RGB(104,104,104) RGB(112,112,112) RGB(120,120,120) RGB(128,128,128) RGB(136,136,136) RGB(144,144,144) RGB(152,152,152) RGB(160,160,160) RGB(168,168,168) RGB(176,176,176) RGB(184,184,184) RGB(192,192,192) RGB(200,200,200) RGB(208,208,208) RGB(216,216,216) RGB(224,224,224) RGB(232,232,232) RGB(240,240,240) RGB(248,248,248) RGB(255,255,255) #000000 #080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF

CSS Colornames

CSS Color Names

CSS Color Names
The table below provides a list of the 147 color names supported by popular browsers. Click on a color name (or a hex value) to view the color as the background-color along with different text colors: Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 Color

DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral

#BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080

LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise

#E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE

PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen

#D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32

CSS Quiz CSS Quiz CSS Exam

Learn TCP/IP HOME TCP/IP Tutorial TCP/IP HOME

TCP/IP Tutorial
TCP/IP Tutorial
TCP/IP is the communication protocol for the Internet. In this tutorial you will learn what TCP/IP is, and how it works.

TCP/IP is the Internet Communication Protocol

A communication protocol is a description of the rules computers must follow to communicate with each other. The Internet communication protocol defines the rules for computer communication over the Internet.

Your Browser and Your Server Use TCP/IP

Internet browsers and Internet servers use TCP/IP to connect to the Internet. Your browser uses TCP/IP to access Internet servers, and servers use TCP/IP to send HTML back to your browser.

Your E-Mail Uses TCP/IP

Your e-mail program uses TCP/IP to connect to the Internet for sending and receiving e-mails.

Your Internet Address is TCP/IP

Your Internet address "201.130.166.179" is a part of the standard TCP/IP protocol. (And so is your domain name "www.someonesplace.com")

TCP/IP Intro

Introduction to TCP/IP
TCP/IP is the communication protocol for the Internet.

Computer Communication Protocol

A computer communication protocol is a description of the rules computers must follow to communicate with each other.

What is TCP/IP?
TCP/IP is the communication protocol for communication between computers connected to the Internet. TCP/IP stands for Transmission Control Protocol / Internet Protocol. The standard defines how electronic devices (like computers) should be connected to the Internet, and how data should be transmitted between them.

Inside TCP/IP
Hiding inside the TCP/IP standard there are a number of protocols for handling data communication:

TCP (Transmission Control Protocol) communication between applications UDP (User Datagram Protocol) simple communication between applications IP (Internet Protocol) communication between computers ICMP (Internet Control Message Protocol) for errors and statistics DHCP (Dynamic Host Configuration Protocol) for dynamic addressing

You will learn more about these standards later in this tutorial.

TCP Uses a Fixed Connection

TCP is for communication between applications. When an application wants to communicate with another application via TCP, it sends a communication request. This request must be sent to an exact address. After a "handshake" between the two applications, TCP will setup a "full-duplex" communication between the two applications. The "full-duplex" communication will occupy the communication line between the two computers until it is closed by one of the two applications. UDP is very similar to TCP, but is simpler and less reliable.

IP is Connection-Less
IP is for communication between computers. IP is a "connection-less" communication protocol. It does not occupy the communication line between two communicating computers. This way IP reduces the need for network lines. Each line can be used for communication between many different computers at the same time. With IP, messages (or other data) are broken up into small independent "packets" and sent between computers via the Internet. IP is responsible for "routing" each packet to its destination.

IP Routers
When an IP packet is sent from a computer, it arrives at an IP router. The IP router is responsible for "routing" the packet to its destination, directly or via another router. The path the packet will follow might be different from other packets of the same communication. The router is responsible for the right addressing depending on traffic volume, errors in the network, or other parameters.

Connection-Less Analogy
Communicating via IP is like sending a long letter as a large number of small postcards, each finding its own (often different) way to the receiver.

TCP/IP
TCP/IP is TCP and IP working together. TCP takes care of the communication between your application software (i.e. your browser) and your network software. IP takes care of the communication with other computers. TCP is responsible for breaking data down into IP packets before they are sent, and for assembling the packets when they arrive. IP is responsible for sending the packets to the receiver.

TCP/IP Addressing

TCP/IP Addressing
TCP/IP uses 32 bits, or 4 numbers between 0 and 255 to address a computer.

IP Addresses
Each computer must have an IP address before it can connect to the Internet. Each IP packet must have an address before it can be sent to another computer. This is an IP address: 192.68.20.50. This might be the same IP address: www.w3schools.com You will learn more about IP addresses and IP names in the next chapter of this tutorial.

An IP Address Contains 4 Numbers.

This is your IP address: 201.130.166.179 TCP/IP uses 4 numbers to address a computer. Each computer must have a unique 4 number address. The numbers are always between 0 and 255. Addresses are normally written as four numbers separated by a period like this: 192.168.1.50.

32 Bits = 4 Bytes
TCP/IP uses 32 bits addressing. One computer byte is 8 bits. So TCP/IP uses 4 computer bytes. A computer byte can contain 256 different values: 00000000, 00000001, 00000010, 00000011, 00000100, 00000101, 00000110, 00000111, 00001000 .......and all the way up to 11111111. Now you know why a TCP/IP address is 4 numbers between 0 and 255

Domain Names
12 digit numbers are hard to remember. Using a name is easier. Names used for TCP/IP addresses are called domain names. w3schools.com is a domain name. When you address a web site like http://www.w3schools.com, the name is translated to a number by a DNS process (Domain Name Server). All over the world, a large number of DNS servers are connected to the Internet. DNS servers are responsible for translating domain names into TCP/IP addresses and update each other with new domain names. When a new domain name is registered together with a TCP/IP address, DNS servers all over the world are updated with this information.

TCP/IP Protocols

TCP/IP Protocols
TCP/IP is a large collection of different communication protocols.

A Family of Protocols
TCP/IP is a large collection of different communication protocols based upon the two original protocols TCP and IP.

TCP - Transmission Control Protocol

TCP is used for transmission of data from an application to the network. TCP is responsible for breaking data down into IP packets before they are sent, and for assembling the packets when they arrive.

IP - Internet Protocol
IP takes care of the communication with other computers. IP is responsible for the sending and receiving data packets over the Internet.

HTTP - Hyper Text Transfer Protocol

HTTP takes care of the communication between a web server and a web browser. HTTP is used for sending requests from a web client (a browser) to a web server, returning web content (web pages) from the server back to the client.

HTTPS - Secure HTTP

HTTPS takes care of secure communication between a web server and a web browser. HTTPS typically handles credit card transactions and other sensitive data.

SSL - Secure Sockets Layer

The SSL protocol is used for encryption of data for secure data transmission.

SMTP - Simple Mail Transfer Protocol

SMTP is used for transmission of e-mails.

MIME - Multi-purpose Internet Mail Extensions

The MIME protocol lets SMTP transmit multimedia files including voice, audio, and binary data across TCP/IP networks.

IMAP - Internet Message Access Protocol

IMAP is used for storing and retrieving e-mails.

POP - Post Office Protocol

POP is used for downloading e-mails from an e-mail server to a personal computer.

FTP - File Transfer Protocol

FTP takes care of transmission of files between computers.

NTP - Network Time Protocol

NTP is used to synchronize the time (the clock) between computers.

DHCP - Dynamic Host Configuration Protocol

DHCP is used for allocation of dynamic IP addresses to computers in a network.

SNMP - Simple Network Management Protocol

SNMP is used for administration of computer networks.

LDAP - Lightweight Directory Access Protocol

LDAP is used for collecting information about users and e-mail addresses from the internet.

ICMP - Internet Control Message Protocol

ICMP takes care of error handling in the network.

ARP - Address Resolution Protocol

ARP is used by IP to find the hardware address of a computer network card based on the IP address.

RARP - Reverse Address Resolution Protocol

RARP is used by IP to find the IP address based on the hardware address of a computer network card.

BOOTP - Boot Protocol

BOOTP is used for booting (starting) computers from the network.

PPTP - Point to Point Tunneling Protocol

PPTP is used for setting up a connection (tunnel) between private networks.

TCP/IP Email

TCP/IP Email
Email is one of the most important uses of TCP/IP.

You Don't

When you write an email, you don't use TCP/IP. When you write an email, you use an email program like Lotus Notes, Microsoft Outlook or Netscape Communicator.

Your Email Program Does

Your email program uses different TCP/IP protocols:

It sends your emails using SMTP It can download your emails from an email server using POP It can connect to an email server using IMAP

SMTP - Simple Mail Transfer Protocol

The SMTP protocol is used for the transmission of e-mails. SMTP takes care of sending your email to another computer. Normally your email is sent to an email server (SMTP server), and then to another server or servers, and finally to its destination. SMTP can only transmit pure text. It cannot transmit binary data like pictures, sounds or movies. SMTP uses the MIME protocol to send binary data across TCP/IP networks. The MIME protocol converts binary data to pure text.

POP - Post Office Protocol

The POP protocol is used by email programs (like Microsoft Outlook) to retrieve emails from an email server. If your email program uses POP, all your emails are downloaded to your email program (also called email client), each time it connects to your email server.

IMAP - Internet Message Access Protocol

The IMAP protocol is used by email programs (like Microsoft Outlook) just like the POP protocol.

The main difference between the IMAP protocol and the POP protocol is that the IMAP protocol will not automatically download all your emails each time your email program connects to your email server. The IMAP protocol allows you to see through your email messages at the email server before you download them. With IMAP you can choose to download your messages or just delete them. This way IMAP is perfect if you need to connect to your email server from different locations, but only want to download your messages when you are back in your office.

Selected Reading Web Statistics Web Glossary Web Hosting Web Quality W3Schools Forum Helping W3Schools W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2007 by Refsnes Data. All Rights Reserved.

Information continued in file Learning the Web 2